卡卡網(wǎng)

在前文中，我介紹了常規(guī)函數(shù)中的this，然而箭頭函數(shù)與常規(guī)函數(shù)不同，此外，箭頭函數(shù)與常規(guī)函數(shù)的this也不同，因此，在本文中，我將介紹箭頭函數(shù)中的this值。

this是定義箭頭函數(shù)的封閉上下文

箭頭函數(shù)不會(huì)創(chuàng)建自己的執(zhí)行上下文，而是用this從定義它的外部函數(shù)中獲取。換句話說，箭頭函數(shù)在this詞法上解析。

以下示例顯示了上下文透明度屬性：

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  log() {
    console.log(this === myPoint); // => true
    setTimeout(() => {
      console.log(this === myPoint);      // => true
      console.log(this.x + ':' + this.y); // => '95:165'
    }, 1000);
  }
}
const myPoint = new Point(95, 165);
myPoint.log();

setTimeout()使用與log()方法相同的上下文（myPoint 對(duì)象）調(diào)用箭頭函數(shù)。正如你所見，箭頭函數(shù)從定義它的函數(shù)“繼承”上下文。

此示例中的常規(guī)函數(shù)??將創(chuàng)建自己的上下文——window或undefined(在嚴(yán)格模式下)，因此，要使相同的代碼與函數(shù)表達(dá)式一起正常工作，必須手動(dòng)綁定上下文：setTimeout(function() {...}.bind(this))， 這很冗長(zhǎng)，使用箭頭函數(shù)是一種更簡(jiǎn)潔、更短的解決方案。

如果箭頭函數(shù)定義在最頂層范圍（任何函數(shù)之外），則上下文始終是全局對(duì)象（window在瀏覽器中）：

const getContext = () => {
 console.log(this === window); // => true
 return this;
};
console.log(getContext() === window); // => true

使用上下文修改方法也無法修改this

箭頭函數(shù)與this詞匯永遠(yuǎn)綁定在一起。即使使用上下文修改方法也無法修改this：

const numbers = [1, 2];
(function() { 
  const get = () => {
    console.log(this === numbers); // => true
    return this;
  };
  
  console.log(this === numbers); // => true
  get(); // => [1, 2]
  
  // 試圖手動(dòng)修改箭頭函數(shù)上下文
  get.call([0]);  // => [1, 2]
  get.apply([0]); // => [1, 2]
  
  get.bind([0])(); // => [1, 2]
}).call(numbers);

無論箭頭函數(shù)get()如何調(diào)用，它始終保持詞法上下文numbers。用其他上下文get.call([0])或get.apply([0])間接調(diào)用，重新綁定get.bind([0])()無效。

箭頭函數(shù)不能用作構(gòu)造函數(shù)。將其作為構(gòu)造函數(shù)new get()調(diào)用會(huì)引發(fā)錯(cuò)誤：TypeError: get is not a constructor。

總結(jié)

本文通過幾個(gè)示例，介紹了箭頭函數(shù)中的this值。通過本文的學(xué)習(xí)，我們應(yīng)該了解“上下文——箭頭函數(shù)——this”之間的意義。

相關(guān)文章

• [示例]this在函數(shù)調(diào)用里的值是全局對(duì)象還是undefined？
• JavaScript面試題：關(guān)于this關(guān)鍵字的6個(gè)面試問題
• [實(shí)例]演示區(qū)別箭頭函數(shù)和常規(guī)函數(shù)的this值
• 實(shí)例詳解JS箭頭函數(shù)=>與傳統(tǒng)匿名函數(shù)處理this的不同方法
• 詳解JS call() apply()和bind() this的用法區(qū)別
• 【示例】詳解JS里this的上下文對(duì)象及用法

• 新手指南：理解JS中的箭頭函數(shù)和常規(guī)函數(shù)
• 不能使用箭頭函數(shù)的6種情況
• 箭頭函數(shù)=>不能換行？大括號(hào){}這種情況下可以不要
• 實(shí)例演示無參數(shù)、單參數(shù)、多參數(shù)的箭頭函數(shù)用法
• 實(shí)例詳解JS箭頭函數(shù)=>與傳統(tǒng)匿名函數(shù)處理this的不同方法

標(biāo)簽: this  箭頭函數(shù)