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

目錄

* 一個特例
* 開始判斷
    * 法則一：對象方法中的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() 

再次說明，該法則爲實驗性法則，未進行大範圍的測試，不保證在全部狀況下都有一致的結果。若是你發現了法則判斷失敗的狀況，歡迎留言，一塊兒探討。