摘要：在語言中，關于這個關鍵字的行為一直以來困擾著一代又一代初級開發者。同時，也充分反應了的詭異與靈活。這種情況下，無法自動綁定。總結本文在對比綁定的五種方法的同時，也由遠及近了解了語言的發展從的，到的箭頭函數，再到對的改進。

在 javascript 語言中，關于 this 這個關鍵字的行為一直以來困擾著一代又一代初級開發者。同時 this，也充分反應了 javascript 的詭異與靈活。

但是請別誤會，這篇文章并不會對 this 的特征進行全方位講解，因為這些內容都可以在各種前端書籍中找到答案。這里，我試圖結合 React 事件處理函數關于 this 綁定的演化史，談一談這個框架設計以及 javascript 語言在這一細節上的進步和完善。同時對比 this 綁定的不同方案，讓大家對 React 、ES next 有一個更清晰的認識。

React 處理 this 上下文環境已經有至少五年歷史了。五年期間，方案輩出，我們先來總結一下。

React 中創建組件的方式已經很多，比較古老的諸如 React.createClass 應該很多人并不陌生。當然，從 React 0.13 開始，可以使用 ES6 Class 代替 React.createClass 了，這應該是今后推薦的方法。
但是需要知道，React.createClass 創建的組件，可以自動綁定 this。也就是說，this 這個關鍵字會自動綁定在組件實例上面。

// This magically works with React.createClass
// because `this` is bound for you.
onChange = {this.handleChange}

當然很遺憾，對于組件的創建，官方已經推薦使用 class 聲明組件或使用 functional 無狀態組件：

Later, classes were added to the language as part of ES2015, so we added the ability to create React components using JavaScript classes. Along with functional components, JavaScript classes are now the preferred way to create components in React.

For your existing createClass components, we recommend that you migrate them to JavaScript classes.

我認為，這其實是 React 框架本身的自我完善和對未來的迎合，是框架和語言發展的大勢所趨。

通過前文，我們知道最傳統的組件創建方式不會有 this 綁定的困擾。接下來，我們假定所有的組件都采取 ES6 classes 方式聲明。這種情況下，this 無法自動綁定。一個常見的解決方案便是：

onChange = {this.handleChange.bind(this)}

這種方法簡明扼要，但是有一個潛在的性能問題：當組件每次重新渲染時，都會有一個新的函數創建。OMG! 這聽上去貌似是一個很大的問題，但是其實在真正的開發場景中，由此引發的性能問題往往不值一提（除非是大型組件消費類應用或游戲）。

這種方法其實和第二種類似，拜 ES6 箭頭函數所賜，我們可以隱式綁定 this：

onChange = {e => this.handleChange(e)}

當然，也與第二種方法一樣，它同樣存在潛在的性能問題。
下面將要介紹的兩種方法，可以有效規避不必要的性能消耗，請繼續閱讀。

constructor 方法是類的默認方法，通過new命令生成對象實例時，自動調用該方法。

所以我們可以：

constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
}

這種方式往往被推薦為“最佳實踐”，也是筆者最為常用的方法。

但是就個人習慣而言，我認為與前兩種方法相比，constructor 內綁定在可讀性和可維護性上也許有些欠缺。
同時，我們知道在 constructor 聲明的方法不會存在實例的原型上，而屬于實例本身的方法。每個實例都有同樣一個 handleChange，這本身也是一種重復和浪費。

如果你對 ES next 一直抱有開放的思想，且能夠使用 stage-2 的特性，不妨嘗試一下最后一種方案。

這個方法依賴于 ES next 的新特性，請參考 tc 39: Public Class Fields

handleChange = () => {
      // call this function from render 
      // and this.whatever in here works fine.
};

我們來總結一下這種方式的優點：

使用箭頭函數，有效綁定了 this；

沒有第二種方法和第三種方法的潛在性能問題；

避免了方法四的組件實例重復問題；

我們可以直接從 ES5 createClass 重構得來。

本文在對比 React 綁定 this 的五種方法的同時，也由遠及近了解了 javascript 語言的發展：從 ES5 的 bind， 到 ES6 的箭頭函數，再到 ES next 對 class 的改進。

React 作為蓬勃發展的框架也同樣在與時具進，不斷完善，結合語言特性的發展不斷調整著自身。

最后，我們通過這張圖片來完整回顧：

本文參考了 Cory House 的文章：5 Approaches for Handling this，并在此基礎上進行延伸。

我的其他一些關于 React 文章：

React 組件設計和分解思考

做出Uber移動網頁版還不夠 極致性能打造才見真章

解析Twitter前端架構 學習復雜場景數據設計

React Conf 2017 干貨總結1: React + ES next = ?

React+Redux打造“NEWS EARLY”單頁應用 一個項目理解最前沿技術棧真諦

一個react+redux工程實例

......

Happy Coding!

PS: 作者Github倉庫，歡迎通過代碼各種形式交流。