開發者的javascript造詣取決於對【動態】和【異步】這兩個詞的理解水平。
這一期主要分析各種實際開發中各種複雜的this指向問題。
一. 嚴格模式
嚴格模式是ES5中添加的javascript的另一種運行模式，它可以禁止使用一些語法上不合理的部分，提高編譯和運行速度，但語法要求也更爲嚴格，使用use strict標記開啓。
嚴格模式中this的默認指向不再爲全局對象，而是默認指向undefined。這樣限制的好處是在使用構造函數而忘記寫new操作符時會報錯，而不會把本來需要綁定在實例上的一堆屬性全綁在window對象上，在許多沒有正確地綁定this的場景中也會報錯。
二. 函數和方法的嵌套與混用
詞法定義並不影響this的指向 , 因爲this是運行時確定指向的。
2.1 函數定義的嵌套
function outerFun(){
function innerFun(){
console.log('innerFun內部的this指向了：',this);
}
innerFun();
}
outerFun();控制檯輸出的this指向全局對象。
2.2 對象屬性的嵌套
當調用的函數在對象結構上的定義具有一定深度時，this指向這個方法所在的對象，而不是最外層的對象。
var IronMan = {
realname:'Tony Stark',
rank:'1',
ability:{
total_types:100,
fly:function(){
console.log('IronMan.ability.fly ，作爲方法調用時this指向：',this);
},
}
}
IronMan.ability.fly();控制檯輸出的this指向IronMan的ability屬性所指向的對象，調用fly( )這個方法的對象是IronMan.ability所指向的對象，而不是IronMan所指向的對象。
this作爲對象方法調用時，標識着這個方法是如何被找到的。IronMan這個標識符指向的對象信息並不能在運行時找到fly( )這個方法的位置，因爲ability屬性中只存了另一個對象的引用地址，而IronMan.ability對象的fly屬性所記錄的指向，才能讓引擎在運行時找到這個匿名方法。
三. 引用轉換
引用轉換實際上並不會影響this的指向，因爲它是詞法性質的，發生在定義時，而this的指向是運行時確定的。只要遵循this指向的基本原則就不難理解。
3.1 標識符引用轉換爲對象方法引用
var originFun = function (){
console.log('originFun內部的this爲:',this);
}
var ironMan = {
attack:originFun
};
ironMan.attack();這裏的this指向其調用者，也就是ironMan引用的對象。
3.2 對象方法轉換爲標識符引用
var ironMan = {
attack:function(){
console.log('對象方法中this指向了：',this);
}
}
var originFun = ironMan.attack;
originFun();這裏的this指向全局對象，瀏覽器中也就是window對象。3.2中的示例被認爲是javascript語言的bug，即this指向丟失的問題。同樣的問題也可能在回調函數傳參時發生，本文【第5章】將對這種情況進行詳細說明。
四. 回調函數
javascript中的函數是可以被當做參數傳遞進另一個函數中的，也就有了回調函數這樣一個概念。
4.1 this在回調函數中的表現
var IronMan = {
attack:function(findEnemy){
findEnemy();
}
}
function findEnemy(){
console.log('已聲明的函數被當做回調函數調用，this指向:',this);
}
var attackAction = {
findEnemy:function(){
console.log('attackAction.findEnemy本當做回調函數調用時，this指向',this);
},
isArmed:function(){
console.log('check whether the actor is Armed');
}
}
//1.直接傳入匿名函數
IronMan.attack(function(){
console.log(this);
});
//2.傳入外部定義函數
IronMan.attack(findEnemy);
//3.傳入外部定義的對象方法
IronMan.attack(attackAction.findEnemy);從控制檯打印的結果來看，無論以哪種方式來傳遞迴調函數，回調函數執行時的this都指向了全局變量。
4.2 原理
javascript中函數傳參全部都是值傳遞，也就是說如果調用函數時傳入一個原始類型，則會把這個值賦值給對應的形參；如果傳入一個引用類型，則會把其中保存的內存指向的地址賦值給對應的形參。所以在函數內部操作一個值爲引用類型的形參時，會影響到函數外部作用域，因爲它們均指向內存中的同一個函數。詳細可參考[深入理解javascript函數系列第二篇——函數參數]這篇博文。
理解了函數傳參，就很容易理解回調函數中this爲何指向全局了，回調函數對應的形參是一個引用類型的標識符，其中保存的地址直接指向這個函數在內存中的真實位置，那麼通過執行這個標識符來調用函數就等同於this基本指向規則中的作爲函數來調用的情況，其this指向全局對象也就不難理解了。
五. this指針丟失
在第三節和第四節中，通過原理分析就能夠明白爲何在一些特定的場合下this會指向全局對象，但是從語言的角度來看，卻很難理解this爲什麼指向了全局對象，因爲這個規則和語法的字面意思是有衝突的。
5.1 回調函數的字面語境
var name = 'HanMeiMei';
var liLei = {
name:'liLei',
introduce:function () {
console.log('My name is ', this.name);
}
};
var liLeiSay = liLei.introduce;
liLeiSay();//同第三節中的引用轉換示例
setTimeout(liLei.introduce,2000);//同第四節中的回調函數示例上面的代碼從字面上看意義是很明確的，就是希望liLei立刻介紹一下自己，在2秒後再介紹一下他自己。但控制檯輸出的結果中，他卻兩次都說自己的名字是HanMeiMei。
5.2 this指針丟失
5.1中的示例，也稱爲this指針丟失問題,被認爲是Javascript語言的設計失誤，因爲這種設計在字面語義上造成了混亂。
5.3 this指針修復
方式1-使用bind
爲了使代碼的字面語境和實際執行保持一致，需要通過顯示指定this的方式對this的指向進行修復。常用的方法是使用bind( )生成一個確定了this指向的新函數，將上述示例改爲如下方式即可修復this的指向:
var liLeiSay = liLei.introduce.bind(liLei);
setTimeout(liLei.introduce.bind(liLei),2000);bind( )的實現其實並不複雜，是閉包實現高階函數的一個簡單的實例，感興趣的讀者可以自行了解。
方式2-使用Proxy
Proxy是ES6中才支持的方法。
//綁定This的函數
function fixThis (target) {
const cache = new WeakMap();
//返回一個新的代理對象
return new Proxy(target, {
get (target, key) {
const value = Reflect.get(target, key);
//如果要取的屬性不是函數，則直接返回屬性值
if (typeof value !== 'function') {
return value;
}
if (!cache.has(value)) {
cache.set(value, value.bind(target));
}
return cache.get(value);
}
});
}
const toggleButtonInstance = fitThis(new ToggleButton());兩種修復
this指向的思路其實很類似，第一種方式相當於爲調用的方法創建了一個代理方法，第二種方式是爲被訪問的對象創建了一個代理對象。
六. this的透傳
實際開發過程中，往往需要在更深層次的函數中獲取外層this的指向。
常規的解決方案是：將外層函數的this賦值給一個局部變量，通會使用_this,that,self,_self等來作爲變量名保存當前作用域中的this。由於在javascript中作用域鏈的存在，嵌套的內部函數可以調用外部函數的局部變量，標識符會去尋找距離作用域鏈末端最近的一個指向作爲其值，示例如下:
document.querySelector('#btn').onclick = function(){
//保存外部函數中的this
var _this = this;
_.each(dataSet, function(item, index){
//回調函數的this指向了全局，調用外部函數的this來操作DOM元素
_this.innerHTML += item;
});
}七. 事件監聽
事件監聽中this的指向情況其實是幾種情況的集合，與代碼如何編寫有很大關係。
7.1 表現
1. 在html文件中使用事件監聽相關的屬性來觸發方法
<button onclick="someFun()">點擊按鈕</button>
<button onclick="someObj.someFun()">點擊按鈕</button>如果以第一種方式觸發，則函數中的this指向全局；
如果以第二種方式觸發,則函數中的this指向someObj這個對象。
2. 在js文件中直接爲屬性賦值
//聲明一個函數
function callFromHTML() {
console.log('callFromHTML,this指向：',this);
}
//定義一個對象方法
var obj = {
callFromObj:function () {
console.log('callFromObj',this);
}
}
//註冊事件監聽-方式1
document.querySelector('#btn').onclick = function (event) {
console.log(this);
}
//註冊事件監聽-方式2
document.querySelector('#btn').onclick = callFromHTML;
//註冊事件監聽-方式3
document.querySelector('#btn').onclick = obj.callFromObj;
以上三種註冊的事件監聽響應函數，其this均指向id="btn"的DOM元素。
3. 使用addEventListener方法註冊響應函數
//低版本IE瀏覽器中需要使用另外的方法
document.querySelector('#btn').addEventListener('click',function(event){
console.log(this);
});
//也可以將函數名或對象方法作爲回調函數傳入
document.querySelector('#btn').addEventListener('click',callFromHTML);
document.querySelector('#btn').addEventListener('click',obj.callFromObj);這種方式註冊的響應函數，其this與場景2相同，均指向id="btn"的DOM元素。區別在於使用addEventListener方法添加的響應函數會依次執行，而採用場景2的方式時，只有最後一次賦值的函數會被調用。
7.2 基本原理
1. 通過標籤屬性註冊
<button id="btn" onclick="callFromHTML()">點我</button>
<script>
function callFromHTML() {
console.log(document.querySelector('#btn').onclick);
}
</script>在html中綁定事件處理程序，然後當按鈕點擊時，在控制檯打印出DOM對象的onclick屬性,可以看到：
這種綁定方式其實是將監聽方法包裹在另一個函數中去執行，相當於:
document.querySelector('#btn').onclick = function(event){
callFromHTML();
}這樣上述的表現就不難理解了。
2. 通過元素對象屬性註冊
document在javascript中是一個對象，通過其暴露的查找方法返回的節點也是一個對象，那麼方式二綁定的監聽函數在運行時，實際上就是在執行指定節點的onclick方法，根據this指向的基本規則可知其函數體中的this應該指向調用對象，也就是onclick這個方法所在的節點對象。
3. 通過addEventListener方法註冊
這種方式是在DOM2事件模型中擴展的，用於支持多個監聽器綁定的場景。DOM2事件模型的描述中規定了通過這種方式添加的監聽函數執行時的this指向所在的節點對象，不同內核的瀏覽器實現方式有區別。
7.3 使用建議
不同的使用方式實質上是伴隨着DOM事件模型升級而發生改變的，現代瀏覽器對於以上幾種模式都是支持的，只有需要兼容老版本瀏覽器時需要考慮對DOM事件模型的支持程度。開發中DOM2級事件模型中addEventListener()和removeEventListener()來管理事件監聽函數是最爲推薦的方法。
八. 異步函數
1. setTimeout( )和setInterval( )
這裏的情況相當於上文中的回調函數的情況。
2. 事件監聽
詳見第7章。
3. ajax請求
幾乎沒有遇到過。
4. Promise
這裏的情況相當於上文中的回調函數的情況。
九. 箭頭函數和this
箭頭函數是ES6標準中支持的語法，它的誕生不僅僅是因爲表達方式簡潔，也是爲了更好地支持函數式編程。箭頭函數內部不綁定this,arguments,super,new.target，所以由於作用域鏈的機制，箭頭函數的函數體中如果使用到this,則執行引擎會沿着作用域鏈去獲取外層的this。
十. Nodejs中的this
Nodejs是一種脫離瀏覽器環境的javascript運行環境，this的指向規則上與瀏覽器環境在全局對象的指向上存在一定差異。
1. 全局對象global
Nodejs的運行環境並不是瀏覽器，所以程序裏沒有DOM和BOM對象，Nodejs中也存在全局作用域，用來定義一些不需要通過任何模塊的加載即可使用的變量、函數或類，全局對象中多爲一些系統級的信息或方法，例如獲取當前模塊的路徑，操作進程，定時任務等等。
2. 文件級this指向
Nodejs是支持模塊作用域的，每一個文件都是一個模塊，可通過require( )的方式同步引入，通過module.exports來暴露接口供其他模塊調用。在一個文件中最頂級的this指向當前這個文件模塊對外暴露的接口對象，也就是module.exports指向的對象。示例:
var IronMan = {
name:'Tony Stark',
attack: function(){
}
}
exports.IronMan = IronMan;
console.log(this);在控制檯即可看到，this指向一個對象，對象中只有一個屬性IronMan,屬性值爲文件中定義的IronMan這個對象。
3. 函數級this指向
this的基本規則中有一條—當作爲函數調用時，函數中的this指向全局對象，這一條在nodejs中也是成立的，這裏的this指向了全局對象（此處的全局對象Global對象是有別於模塊級全局對象的）。
思考題— React組件中爲什麼要bind(this)
如果你嘗試使用過React進行前端開發，一定見過下面這樣的代碼：
//假想定義一個ToggleButton開關組件
class ToggleButton extends React.Component{
constructor(props){
super(props);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleClick(){
this.setState(prevState => ({
isToggleOn: !preveState.isToggleOn
}));
}
handleChange(){
console.log(this.state.isToggleOn);
}
render(){
return(
<button onClick={this.handleClick} onChange={this.handleChange}>
{this.state.isToggleOn ? 'ON':'OFF'}
</button>
)
}
}思考題：構造方法中爲什麼要給所有的實例方法綁定this呢？（強烈建議讀者先自己思考再看筆者分析）
1. 代碼執行的細節
上例僅僅是一個組件類的定義，當在其他組件中調用或是使用ReactDOM.render( )方法將其渲染到界面上時會生成一個組件的實例，因爲組件是可以複用的，面向對象的編程方式非常適合它的定位。根據this指向的基本規則就可以知道，這裏的this最終會指向組件的實例。
組件實例生成的時候，構造器constructor會被執行，此處着重分析一下下面這行代碼：
this.handleClick = this.handleClick.bind(this);此時的this指向新生成的實例，那麼賦值語句右側的表達式先查找this.handleClick( )這個方法，由對象的屬性查找機制（沿原型鏈由近及遠查找）可知此處會查找到原型方法this.handleClick( ),接着執行bind(this)，此處的this指向新生成的實例，所以賦值語句右側的表達式計算完成後，會生成一個指定了this的新方法，接着執行賦值操作，將新生成的函數賦值給實例的handleClick屬性，由對象的賦值機制可知，此處的handleClick會直接作爲實例屬性生成。總結一下，上面的語句做了一件這樣的事情：
把原型方法handleClick( )改變爲實例方法handleClick( ),並且強制指定這個方法中的this指向當前的實例。
2. 綁定this的必要性
在組件上綁定事件監聽器，是爲了響應用戶的交互動作，特定的交互動作觸發事件時，監聽函數中往往都需要操作組件某個狀態的值，進而對用戶的點擊行爲提供響應反饋，對開發者來說，這個函數觸發的時候，就需要能夠拿到這個組件專屬的狀態合集（例如在上面的開關組件ToggleButton例子中，它的內部狀態屬性state.isToggleOn的值就標記了這個按鈕應該顯示ON或者OFF），所以此處強制綁定監聽器函數的this指向當前實例的也很容易理解。
React構造方法中的bind會將響應函數與這個組件Component進行綁定以確保在這個處理函數中使用this時可以時刻指向這一組件的實例。
3. 如果不綁定this
如果類定義中沒有綁定this的指向,當用戶的點擊動作觸發this.handleClick( )這個方法時，實際上執行的是原型方法，可這樣看起來並沒有什麼影響，如果當前組件的構造器中初始化了state這個屬性，那麼原型方法執行時，this.state會直接獲取實例的state屬性，如果構造其中沒有初始化state這個屬性（比如React中的UI組件），說明組件沒有自身狀態，此時即使調用原型方法似乎也沒什麼影響。
事實上的確是這樣，這裏的bind(this)所希望提前規避的，就是第五章中的this指針丟失的問題。
例如使用解構賦值的方式獲取某個屬性方法時，就會造成引用轉換丟失this的問題:
const toggleButton = new ToggleButton();
import {handleClick} = toggleButton;上例中解構賦值獲取到的handleClick這個方法在執行時就會報錯，Class的內部是強制運行在嚴格模式下的，此處的this在賦值中丟失了原有的指向，在運行時指向了undefined，而undefined是沒有屬性的。
另一個存在的限制，是沒有綁定this的響應函數在異步運行時可能會出問題，當它作爲回調函數被傳入一個異步執行的方法時，同樣會因爲丟失了this的指向而引發錯誤。
如果沒有強制指定組件實例方法的
this，在將來的使用中就無法安心使用引用轉換或作爲回調函數傳遞這樣的方式，對於後續使用和協作開發而言都是不方便的。
參考
[1]《javascript高級程序設計（第三版）》
[2]《深入理解javascript函數系列第二篇》https://www.cnblogs.com/xiaohuochai/p/5706289.html
[3]《ES6-Class基本語法》https://www.cnblogs.com/ChenChunChang/p/8296350.html