箭頭函式this指向詳解

this在JavaScript中是一個相當重要的概念。

給初學者帶來不少困擾，並不是因為此概念有多難，只因為是初學。

這是學習一個必然現象，初學階段總會有些概念會讓人比較痛苦。

大致可以認為非箭頭函式this指向原則如下：

（1）.this指向呼叫此函式的物件。

（2）.如果函式用作建構函式，那麼this指向建構函式建立的物件例項。

不再做過多介紹，更多內容可以參閱如下兩篇文章：

（1）.JavaScript this詳解一章節。

（2）.JavaScript 建構函式一章節。

（3）.JavaScript 箭頭函式一章節。

ES2015新增箭頭函式與普通函式相比做了諸多改變。

具體內容可以參閱箭頭函式與普通函式的區別一章節。

this的指向在箭頭函式中有根本性變化，下面通過程式碼例項對其做一下介紹。

一.箭頭函式本身不建立this：

也可以說箭頭函式本身沒有this，但是在它宣告時可以捕獲別人的this供自己使用。

特別說明：this一旦被捕獲，以後將不再變化。

現在已經知道箭頭函式中的this捕獲而來，下面再來解決this從哪捕獲而來。

箭頭函式中的this是在它宣告時捕獲它所處作用域中的this。

下面通過程式碼例項演示一下。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var webName="螞蟻部落";
let func=()=>{
  console.log(this.webName);
}
func();

程式碼執行效果截圖如下：

螞蟻部落演示箭頭函式在全域性作用域宣告，所以它捕獲全域性作用域中的this，this指向window物件。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var webName = "螞蟻部落";
function wrap(){
  let func=() => {
    console.log(this.webName);
  }
  func();
}
wrap();

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.wrap函式執行時，箭頭函式被宣告，wrap函式作用域中的this指向window物件。

（2）.於是箭頭函式中的this指向window物件。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var webName = "螞蟻部落";
function wrap(){
  this.webName="百度";
  let func=() => {
    console.log(this.webName);
  }
  func();
}
let owrap=new wrap();

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.wrap被用作建構函式。

（2）.使用new呼叫wrap函式之後，此函式作用域中的this指向建立的物件例項。

（3）.箭頭函式也隨之被宣告，此時捕獲這個this。

（4）.於是列印結果是"百度"，而不是螞蟻部落。

二.結合call、apply或bind方法使用：

大家知道call或者apply能夠改變普通函式中this的指向。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let web = {webName:"螞蟻部落"}; 
function fn() { 
  console.log(this); 
  console.log(this.webName); 
} 
fn.call(web);

程式碼執行效果截圖如下：

通過call將fn函式中的this指向物件web。

但是它對箭頭函式不靈光，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var webName="baidu";
let web = {webName:"螞蟻部落"}; 
let fn=()=> { 
  console.log(this); 
  console.log(this.webName); 
} 
fn.call(web);

程式碼執行效果截圖如下：

箭頭函式中的this指向window物件，並沒有被call所影響。