關於this的3大總結

試問

你覺得你懂了this,那就試試，保證懵逼

1. 情景一

window.name = 'bob'; 
class A {
    constructor() {
      this.name = 'tom';
    }
    getName() { 
     console.log(this);
     console.log(this.name + 111); 
    }
} 
let a = new A(); 
let func = a.getName;
func();
複製代碼

在執行完funcA()後，請問輸出啥？

你覺得輸出 ?

那你懂個錘子！！！正確輸出以下：

由於class使用嚴格模式，在嚴格模式下this指向undefined而非window，因此在執行this.name時又報上圖錯誤。若是你還在納悶爲啥輸出不是tom111，那你真的很菜，往下看。

2. 情景二

// 非嚴格模式
window.name = 'bob'
let a = {
  name: 'tom',
  getName: () => {
    console.log(this.name)
  }
}
console.log(a.getName())
複製代碼

你覺得輸出 ？

tom
複製代碼

那你懂個錘子！！！正確輸出是bob.

bob
複製代碼

不用太難過。 這裏由於使用了箭頭函數

箭頭函數定義：箭頭函數的this是在定義函數時綁定的，不是在執行過程當中綁定的。簡單的說，函數在定義時，this就繼承了定義函數的對象。

可能讀完了你仍是不太理解爲啥輸出的是bob，我在用大白話講一下。箭頭函數中的this取決於定義他的函數中的this。在情景二中，箭頭函數是在對象中定義，不是函數！ 箭頭函數沒有被函數包裹，因此this取的是默認對象window

3. 情景三

// 非嚴格模式
window.name = 'bob'
let a = {
  name: 'tom',
  getName: function () {
    console.log(this.name)
  }
}
let func = a.getName;
func();
a.getName();
複製代碼

請問輸出啥？

bob
tom
複製代碼

此次確實對了，由於這裏的this是在執行環節中綁定的。func在window中執行因此綁定的是window。.a.getName()是在對象a中執行，因此this綁定爲對象a。

總結

1. 在嚴格模式下this指向undefined，class默認爲嚴格模式。
2. 箭頭函數的this是在定義函數時就綁定的，若是沒有外層函數則取默認window.
3. 除去以上的特殊狀況，this才由執行過程當中綁定。