ECMAScript 之 Arrow Function 與 This

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

Version

ECMAScript 2015

Anonymous Function

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 。

• 但結果是 NaN

Why Not ?

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

const counter = {
  count: 0,
  increment() {
    self = this;
    setInterval(() => {
      console.log(++self.count);
    }, 1000);
  },
};

counter.increment();

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

Function.prototype.bind()

const counter = {
  count: 0,
  increment() {
    setInterval(function() {
      console.log(++this.count);
    }.bind(this), 1000);
  },
};

counter.increment();

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

Arrow Function

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 的 this 為 this
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