用最簡單的方法判斷JavaScript中this的指向

gggggggbong 發布于2019-08-20 19:09 / 524人閱讀

摘要：法則一對象方法中的指向對象本身箭頭函數形式的除外法則二多層嵌套函數中的指向等同于包含該的最近一個的箭頭函數沒有獨立的作用域，所以繼續往外層走，走到了。

* 一個特例
* 開始判斷
    * 法則一：對象方法中的this指向對象本身（箭頭函數形式的除外）
    * 法則二：多層嵌套函數中的this指向等同于包含該this的最近一個function的this
    * 法則三：箭頭函數以及非指向對象方法中的function的情況下this指向window
* 習題集
    * 普通函數中的this
    * 函數執行后返回另外一個函數中的this（普通函數中）
    * 多層嵌套函數中的this（定時器&箭頭函數）1
    * 多層嵌套函數中的this（定時器&箭頭函數）2

一個特例

在正式開始之前，我們先來說一個特例。

// 構造函數
function Student(name) {
  this.name = name
}
// 創建小明和小紅兩個實例
var XM = new Student("xiaoming")
var XH = new Student("xiaohong")
// 輸出信息
console.log(XM)  // Student {name: "xiaoming"}
console.log(XH)  // Student {name: "xiaohong"}

在構造函數中，this上的值會在創建實例的時候被綁定到新創建的實例上。不適用于下面的判斷方法，所以特此說明。

開始判斷

下面是一個典型例子，我們的分析從這里開始。

var x = {
  name: "bw2",
  getName1: function() {
    console.log(this)
  },
  getName2: function() {
    setTimeout(() => {
      console.log(this)
    },0)
  },
  getName31: () => {
    console.log(this)
  },
  getName32: function() {
    return function() {
      console.log(this)
    }
  }
}
x.getName1()  // {name: "bw2", getName1: ?}
x.getName2()  // {name: "bw2", getName1: ?}
x.getName31()  // Window {stop: ?, open: ?, alert: ?, confirm: ?, prompt: ?,?…}
x.getName32()()  // Window {stop: ?, open: ?, alert: ?, confirm: ?, prompt: ?,?…}

法則一：對象方法中的this指向對象本身（箭頭函數形式的除外）

var x = {
  name: "bw2",
  getName1: function() {
    console.log(this)
  }
}
x.getName1()  // {name: "bw2", getName1: ?}

法則二：多層嵌套函數中的this指向等同于包含該this的最近一個function的this

箭頭函數沒有獨立的this作用域，所以繼續往外層走，走到了getName: function(){}。那么就是他了，this指向等同于這個function內部的this指向。根據法則一，this指向對象本身。

var x = {
  name: "bw2",
  getName2: function() {
    console.log(this)  // 等同于此處的this
    setTimeout(() => {
      console.log(this)  // 原始的this位置
    },0)
  }
}
x.getName2()  // {name: "bw2", getName1: ?}

我們可以試著在瀏覽器中運行，看看結果。

法則三：箭頭函數以及非指向對象方法中的function的情況下this指向window

根據法則二，this是指向最近的function，因此，這里的this等同于返回的函數中的this，不是對象方法中的this，所以，指向全局。

是不是感覺有點奇怪？不過實踐證明確實如此。

var x = {
  name: "bw2",
  getName31: () => {
    console.log(this)
  },
  getName32: function() {
    return function() {
      console.log(this)
    }
  }
}
x.getName31()  // Window {stop: ?, open: ?, alert: ?, confirm: ?, prompt: ?,?…}
x.getName32()()  // Window {stop: ?, open: ?, alert: ?, confirm: ?, prompt: ?,?…}

習題集

歡迎大家按照法則一到三依次判斷，猜測結果，并在瀏覽器下測試。測試結果也可以回復，大家一起討論。

因本人能力有限，該系列法則可能在部分情況下失效。歡迎大家一起討論。

下面是做題時間。

普通函數中的this

function x() {
  console.log(this)
}
x()

函數執行后返回另外一個函數中的this（普通函數中）

function xx(){
  return function() {
    console.log(this)
  }
}
xx()()

多層嵌套函數中的this（定時器&箭頭函數）1

var x = {
  name: "bw2",
  getName: () => {
    setTimeout(() => {
      console.log(this)
    },0)
  }
}
x.getName()

多層嵌套函數中的this（定時器&箭頭函數）2

var x = {
  name: "bw2",
  getName: () => {
    setTimeout(function() {
      console.log(this)
    },0)
  }
}
x.getName()

再次說明，該法則為實驗性法則，未進行大范圍的測試，不保證在所有情況下都有一致的結果。如果你發現了法則判斷失敗的情況，歡迎留言，一起探討。

歡迎關注前端進階指南微信公眾號：

另外我也創了一個對應的QQ群：660112451，歡迎一起交流。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85223.html

用最簡單的方式聊一下JavaScript中的觀察者模式

摘要：觀察者模式，是設計模式之一。即便如此，筆者仍精心準備了這篇博客，期望用最簡單的方式來介紹下該模式。這里有個小知識點提一下函數對象的屬性就是該函數名最后是思路是通過找到指定數組，然后對數組中的回調函數進行依次調用，達到發布的目的。觀察者模式，是JavaScript設計模式之一。當然也不僅僅限于JavaScript這門語言，網上對該模式的介紹已是多如牛毛，而且講得各有特色各有心得。即便如...

megatron 2019-08-22 18:20 評論0 收藏0
javascript的繼承你了解多少？

摘要：和構造函數前面提到，是個內置隱藏屬性，雖然在可以通過訪問，但是其設計本意是不可被讀取和修改的，那么我們如何利用原型鏈來建立繼承關系提供了關鍵字。到這兒，思路就清晰了，怎么讓對象和對象的相連實現繼承只需把的構造函數的連接到就行了。什么是繼承? 大多數人使用繼承不外乎是為了獲得這兩點好處，代碼的抽象和代碼的復用。代碼的抽象就不用說了，交通工具和汽車這類的例子數不勝數，在傳統的OO語言中(...

baishancloud 2019-08-23 14:08 評論0 收藏0
js溫故而知新7(面向對象編程)——學習廖雪峰的js教程

摘要：不區分類和實例的概念，而是通過原型來實現面向對象編程。新創建的的原型鏈是也就是說，的原型指向函數的原型。最后，創建一個對象代碼和前面章節完全一樣小明繼承用定義對象的另一個巨大的好處是繼承更方便了。 JavaScript不區分類和實例的概念，而是通過原型（prototype）來實現面向對象編程。原型是指當我們想要創建xiaoming這個具體的學生時，我們并沒有一個Student類型可用...

Jaden 2019-08-21 11:38 評論0 收藏0
JavaScript EventEmitter

摘要：事件刪除可有可無。創建了一個類，然后在構造函數里初始化一個類的屬性，這個屬性不需要要繼承任何東西，所以用了。但這不是必要的，因為實例化一個都會調用構造函數，皆為初始狀態，應該是不可能已經定義了的，可去掉。成功執行結束后返回。 GitHub地址：JavaScript EventEmitter博客地址：JavaScript EventEmitter 水平有限，歡迎批評指正 2個多月前把 ...

lovXin 2019-08-22 15:42 評論0 收藏0
這兩天老是有兄弟問到Vue的登陸和注冊，登陸成功留在首頁，沒有登錄回到登錄頁面，現在我用最簡單實用的

摘要：其實登錄注冊，并且登錄一次保持登錄的狀態，是每個項目都需要實現的功能。其實登錄注冊，并且登錄一次保持登錄的狀態，是每個項目都需要實現的功能。網上也有很多的方法，不過，不是通俗易懂，在這里說一下我自己的方法，非常簡單實用核心就是用localStorage存、取數據，這樣當刷新瀏覽器，或者關閉在打開的時候能達到預期想要的效果在router/index.js中 import Vue ...

gplane 2019-08-26 12:14 評論0 收藏0