在 javascript 語言中，關于 this 這個關鍵字的行為一直以來困擾著一代又一代初級開發(fā)者黑滴。同時 this憨募，也充分反應了 javascript 的詭異與靈活。
但是請別誤會袁辈，這篇文章并不會對 this 的特征進行全方位講解菜谣，因為這些內容都可以在各種前端書籍中找到答案。這里晚缩，我試圖結合 React 事件處理函數關于 this 綁定的演化史尾膊，談一談這個框架設計以及 javascript 語言在這一細節(jié)上的進步和完善。同時對比 this 綁定的不同方案荞彼，讓大家對 React 冈敛、ES next 有一個更清晰的認識。
React 處理 this 上下文環(huán)境已經有至少五年歷史了鸣皂。五年期間抓谴，方案輩出暮蹂，我們先來總結一下。
方法一：React.createClass 自動綁定
React 中創(chuàng)建組件的方式已經很多癌压，比較古老的諸如 React.createClass 應該很多人并不陌生椎侠。當然，從 React 0.13 開始措拇，可以使用 ES6 Class 代替 React.createClass 了我纪，這應該是今后推薦的方法。
但是需要知道丐吓，React.createClass 創(chuàng)建的組件浅悉，可以自動綁定 this。也就是說券犁，this 這個關鍵字會自動綁定在組件實例上面术健。
// This magically works with React.createClass
// because `this` is bound for you.
onChange = {this.handleChange}
當然很遺憾，對于組件的創(chuàng)建粘衬，官方已經推薦使用 class 聲明組件或使用 functional 無狀態(tài)組件：
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 框架本身的自我完善和對未來的迎合，是框架和語言發(fā)展的大勢所趨稚新。
方法二：渲染時綁定
通過前文勘伺，我們知道最傳統(tǒng)的組件創(chuàng)建方式不會有 this 綁定的困擾。接下來褂删，我們假定所有的組件都采取 ES6 classes 方式聲明飞醉。這種情況下，this 無法自動綁定屯阀。一個常見的解決方案便是：
onChange = {this.handleChange.bind(this)}
這種方法簡明扼要缅帘，但是有一個潛在的性能問題：當組件每次重新渲染時，都會有一個新的函數創(chuàng)建难衰。OMG! 這聽上去貌似是一個很大的問題钦无，但是其實在真正的開發(fā)場景中，由此引發(fā)的性能問題往往不值一提（除非是大型組件消費類應用或游戲）盖袭。
方法三：箭頭函數綁定
這種方法其實和第二種類似失暂，拜 ES6 箭頭函數所賜，我們可以隱式綁定 this：
onChange = {e => this.handleChange(e)}
當然苍凛，也與第二種方法一樣趣席，它同樣存在潛在的性能問題。
下面將要介紹的兩種方法醇蝴，可以有效規(guī)避不必要的性能消耗宣肚，請繼續(xù)閱讀。
方法四：Constructor 內綁定
constructor 方法是類的默認方法悠栓，通過new命令生成對象實例時霉涨，自動調用該方法按价。
所以我們可以：
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
這種方式往往被推薦為“最佳實踐”，也是筆者最為常用的方法笙瑟。
但是就個人習慣而言楼镐，我認為與前兩種方法相比，constructor 內綁定在可讀性和可維護性上也許有些欠缺往枷。
同時框产，我們知道在 constructor 聲明的方法不會存在實例的原型上，而屬于實例本身的方法错洁。每個實例都有同樣一個 handleChange秉宿，這本身也是一種重復和浪費。
如果你對 ES next 一直抱有開放的思想屯碴，且能夠使用 stage-2 的特性描睦，不妨嘗試一下最后一種方案。
方法五：Class 屬性中使用 = 和箭頭函數
這個方法依賴于 ES next 的新特性导而，請參考 tc 39: Public Class Fields
handleChange = () => {
// call this function from render
// and this.whatever in here works fine.
};
我們來總結一下這種方式的優(yōu)點：
- 使用箭頭函數忱叭，有效綁定了 this；
- 沒有第二種方法和第三種方法的潛在性能問題今艺；
- 避免了方法四的組件實例重復問題韵丑；
- 我們可以直接從 ES5 createClass 重構得來。
總結
本文在對比 React 綁定 this 的五種方法的同時洼滚，也由遠及近了解了 javascript 語言的發(fā)展：從 ES5 的 bind埂息， 到 ES6 的箭頭函數，再到 ES next 對 class 的改進遥巴。
React 作為蓬勃發(fā)展的框架也同樣在與時具進，不斷完善享幽，結合語言特性的發(fā)展不斷調整著自身铲掐。
最后，我們通過這張圖片來完整回顧：
本文參考了 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倉庫，歡迎通過代碼各種形式交流奔坟。
