Arrow Function 的 this 與傳統不太一樣

ES5 無論是 Function Declaration 或 Anonymous Function,都可以使用 this 搭配 call()apply()bind() 動態改變 this,ECMAScript 2015 更支援了 Arrow Function,這對原本的 thiscall()apply()bind() 有任何影響嗎 ?

Version


ECMAScript 2015

Anonymous Function


1
2
3
4
5
6
7
8
9
10
const counter = {
count: 0,
increment() {
setInterval(function() {
console.log(++this.count);
}, 1000);
},
};

counter.increment();

一個常見的應用,在 counter object 定義 increment() method,在其內呼叫 setInterval(),由於被要求傳入 function,因此以 Anonymous Function 傳入 setInterval()

由於 Anonymous Function 想對 counter property 做累加,很直覺的就寫出 ++this.count

this000

  • 但結果是 NaN

Why Not ?


1
2
3
setInterval(function() {
console.log(++this.count);
}, 1000);

對每個 function 而言,它都有自己的 this,當 function 成為 object 的 method 時,this 就是 object,但 Anonymous Function 並非 object 的 method,因此 this 並不是指向 object。

這與 class-based OOP 的 this 永遠指向 object 不同,因為 ECMAScript 是以 function 為主體,所以 this 也是以 function 為考量,而非以 object 考量。

Self


1
2
3
4
5
6
7
8
9
10
11
const counter = {
count: 0,
increment() {
self = this;
setInterval(() => {
console.log(++self.count);
}, 1000);
},
};

counter.increment();

最傳統的解法,就是將用 self = this,然後再利用 Closure 特性,讓 Anonymous Function 得到正確的 this

this002

Function.prototype.bind()


1
2
3
4
5
6
7
8
9
10
const counter = {
count: 0,
increment() {
setInterval(function() {
console.log(++this.count);
}.bind(this), 1000);
},
};

counter.increment();

在 ES5 時代,若要解決這個問題,我們可以透過 bind() 強迫將 this 綁定進 Anonymous Function 的 this

this001

Arrow Function


1
2
3
4
5
6
7
8
9
10
const counter = {
count: 0,
increment() {
setInterval(() => {
console.log(++this.count);
}, 1000);
},
};

counter.increment();

實務上 Lambda 最適合以 parameter 方式傳入 function,因此 ECMAScript 特別支援 Arrow Function 實現 Lambda,這比 Anonymous Function 可讀性更高。

在也由於 Arrow Function 在實務上常常要以 this 讀取 object 的 property,為了讓 Arrow Function 更好用,不必再使用 bind(this),Arrow Function 對於 this 有 2 項特色:

  1. Arrow Function 的 this 將以 parent scope 的 thisthis
  2. Arrow Function 的 this 不能夠被改變,因此無法使用 call()apply()bind()

Conclusion


  • Arrow Function 並沒有要取代 Function Declaration 與 Anonymous Function
  • 使用 call()apply()bind() 改變 this 的需求,就要使用 Function Declaration 或 Anonymous Function
  • 沒有 使用 call()apply()bind() 改變 this 的需求,就可使用 Arrow Function

Reference

Egghead.io, Understanding JavaScript’s this Keyword in Depth

2018-11-23