開(kāi)發(fā)者的javascript造詣取決于對(duì)【動(dòng)態(tài)】和【異步】這兩個(gè)詞的理解水平。
十年的乳源網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)整合營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整乳源建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“乳源網(wǎng)站設(shè)計(jì)”,“乳源網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
這一期主要分析各種實(shí)際開(kāi)發(fā)中各種復(fù)雜的this指向問(wèn)題。
嚴(yán)格模式是ES5中添加的javascript的另一種運(yùn)行模式，它可以禁止使用一些語(yǔ)法上不合理的部分，提高編譯和運(yùn)行速度，但語(yǔ)法要求也更為嚴(yán)格，使用use strict標(biāo)記開(kāi)啟。
嚴(yán)格模式中this的默認(rèn)指向不再為全局對(duì)象，而是默認(rèn)指向undefined。這樣限制的好處是在使用構(gòu)造函數(shù)而忘記寫new操作符時(shí)會(huì)報(bào)錯(cuò)，而不會(huì)把本來(lái)需要綁定在實(shí)例上的一堆屬性全綁在window對(duì)象上，在許多沒(méi)有正確地綁定this的場(chǎng)景中也會(huì)報(bào)錯(cuò)。
詞法定義并不影響this的指向 , 因?yàn)?code>this是運(yùn)行時(shí)確定指向的。
2.1 函數(shù)定義的嵌套
重慶分公司
重慶分公司
function outerFun(){
function innerFun(){
console.log('innerFun內(nèi)部的this指向了：',this);
}
innerFun();
}
outerFun();控制臺(tái)輸出的this指向全局對(duì)象。
2.2 對(duì)象屬性的嵌套
當(dāng)調(diào)用的函數(shù)在對(duì)象結(jié)構(gòu)上的定義具有一定深度時(shí)，this指向這個(gè)方法所在的對(duì)象，而不是最外層的對(duì)象。
var IronMan = {
realname:'Tony Stark',
rank:'1',
ability:{
total_types:100,
fly:function(){
console.log('IronMan.ability.fly ，作為方法調(diào)用時(shí)this指向：',this);
},
}
}
IronMan.ability.fly();控制臺(tái)輸出的this指向IronMan的ability屬性所指向的對(duì)象，調(diào)用fly( )這個(gè)方法的對(duì)象是IronMan.ability所指向的對(duì)象，而不是IronMan所指向的對(duì)象。
this作為對(duì)象方法調(diào)用時(shí)，標(biāo)識(shí)著這個(gè)方法是如何被找到的。IronMan這個(gè)標(biāo)識(shí)符指向的對(duì)象信息并不能在運(yùn)行時(shí)找到fly( )這個(gè)方法的位置，因?yàn)?em>ability屬性中只存了另一個(gè)對(duì)象的引用地址，而IronMan.ability對(duì)象的fly屬性所記錄的指向，才能讓引擎在運(yùn)行時(shí)找到這個(gè)匿名方法。
引用轉(zhuǎn)換實(shí)際上并不會(huì)影響this的指向，因?yàn)樗窃~法性質(zhì)的，發(fā)生在定義時(shí)，而this的指向是運(yùn)行時(shí)確定的。只要遵循this指向的基本原則就不難理解。
3.1 標(biāo)識(shí)符引用轉(zhuǎn)換為對(duì)象方法引用
var originFun = function (){
console.log('originFun內(nèi)部的this為:',this);
}
var ironMan = {
attack:originFun
};
ironMan.attack();這里的this指向其調(diào)用者，也就是ironMan引用的對(duì)象。
3.2 對(duì)象方法轉(zhuǎn)換為標(biāo)識(shí)符引用
var ironMan = {
attack:function(){
console.log('對(duì)象方法中this指向了：',this);
}
}
var originFun = ironMan.attack;
originFun();這里的this指向全局對(duì)象，瀏覽器中也就是window對(duì)象。3.2中的示例被認(rèn)為是javascript語(yǔ)言的bug，即this指向丟失的問(wèn)題。同樣的問(wèn)題也可能在回調(diào)函數(shù)傳參時(shí)發(fā)生，本文【第5章】將對(duì)這種情況進(jìn)行詳細(xì)說(shuō)明。
javascript中的函數(shù)是可以被當(dāng)做參數(shù)傳遞進(jìn)另一個(gè)函數(shù)中的，也就有了回調(diào)函數(shù)這樣一個(gè)概念。
4.1 this在回調(diào)函數(shù)中的表現(xiàn)
var IronMan = {
attack:function(findEnemy){
findEnemy();
}
}
function findEnemy(){
console.log('已聲明的函數(shù)被當(dāng)做回調(diào)函數(shù)調(diào)用，this指向:',this);
}
var attackAction = {
findEnemy:function(){
console.log('attackAction.findEnemy本當(dāng)做回調(diào)函數(shù)調(diào)用時(shí)，this指向',this);
},
isArmed:function(){
console.log('check whether the actor is Armed');
}
}
//1.直接傳入匿名函數(shù)
IronMan.attack(function(){
console.log(this);
});
//2.傳入外部定義函數(shù)
IronMan.attack(findEnemy);
//3.傳入外部定義的對(duì)象方法
IronMan.attack(attackAction.findEnemy);從控制臺(tái)打印的結(jié)果來(lái)看，無(wú)論以哪種方式來(lái)傳遞回調(diào)函數(shù)，回調(diào)函數(shù)執(zhí)行時(shí)的this都指向了全局變量。
4.2 原理
javascript中函數(shù)傳參全部都是值傳遞，也就是說(shuō)如果調(diào)用函數(shù)時(shí)傳入一個(gè)原始類型，則會(huì)把這個(gè)值賦值給對(duì)應(yīng)的形參；如果傳入一個(gè)引用類型，則會(huì)把其中保存的內(nèi)存指向的地址賦值給對(duì)應(yīng)的形參。所以在函數(shù)內(nèi)部操作一個(gè)值為引用類型的形參時(shí)，會(huì)影響到函數(shù)外部作用域，因?yàn)樗鼈兙赶騼?nèi)存中的同一個(gè)函數(shù)。詳細(xì)可參考[深入理解javascript函數(shù)系列第二篇——函數(shù)參數(shù)]這篇博文。
理解了函數(shù)傳參，就很容易理解回調(diào)函數(shù)中this為何指向全局了，回調(diào)函數(shù)對(duì)應(yīng)的形參是一個(gè)引用類型的標(biāo)識(shí)符，其中保存的地址直接指向這個(gè)函數(shù)在內(nèi)存中的真實(shí)位置，那么通過(guò)執(zhí)行這個(gè)標(biāo)識(shí)符來(lái)調(diào)用函數(shù)就等同于this基本指向規(guī)則中的作為函數(shù)來(lái)調(diào)用的情況，其this指向全局對(duì)象也就不難理解了。
在第三節(jié)和第四節(jié)中，通過(guò)原理分析就能夠明白為何在一些特定的場(chǎng)合下this會(huì)指向全局對(duì)象，但是從語(yǔ)言的角度來(lái)看，卻很難理解this為什么指向了全局對(duì)象，因?yàn)檫@個(gè)規(guī)則和語(yǔ)法的字面意思是有沖突的。
5.1 回調(diào)函數(shù)的字面語(yǔ)境
var name = 'HanMeiMei';
var liLei = {
name:'liLei',
introduce:function () {
console.log('My name is ', this.name);
}
};
var liLeiSay = liLei.introduce;
liLeiSay();//同第三節(jié)中的引用轉(zhuǎn)換示例
setTimeout(liLei.introduce,2000);//同第四節(jié)中的回調(diào)函數(shù)示例上面的代碼從字面上看意義是很明確的，就是希望liLei立刻介紹一下自己，在2秒后再介紹一下他自己。但控制臺(tái)輸出的結(jié)果中，他卻兩次都說(shuō)自己的名字是HanMeiMei。
5.2 this指針丟失
5.1中的示例，也稱為this指針丟失問(wèn)題,被認(rèn)為是Javascript語(yǔ)言的設(shè)計(jì)失誤，因?yàn)檫@種設(shè)計(jì)在字面語(yǔ)義上造成了混亂。
5.3 this指針修復(fù)
方式1-使用bind
為了使代碼的字面語(yǔ)境和實(shí)際執(zhí)行保持一致，需要通過(guò)顯示指定this的方式對(duì)this的指向進(jìn)行修復(fù)。常用的方法是使用bind( )生成一個(gè)確定了this指向的新函數(shù)，將上述示例改為如下方式即可修復(fù)this的指向:
var liLeiSay = liLei.introduce.bind(liLei);
setTimeout(liLei.introduce.bind(liLei),2000);bind( )的實(shí)現(xiàn)其實(shí)并不復(fù)雜，是閉包實(shí)現(xiàn)高階函數(shù)的一個(gè)簡(jiǎn)單的實(shí)例，感興趣的讀者可以自行了解。
方式2-使用Proxy
Proxy是ES6中才支持的方法。
//綁定This的函數(shù)
function fixThis (target) {
const cache = new WeakMap();
//返回一個(gè)新的代理對(duì)象
return new Proxy(target, {
get (target, key) {
const value = Reflect.get(target, key);
//如果要取的屬性不是函數(shù)，則直接返回屬性值
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());兩種修復(fù)
this指向的思路其實(shí)很類似，第一種方式相當(dāng)于為調(diào)用的方法創(chuàng)建了一個(gè)代理方法，第二種方式是為被訪問(wèn)的對(duì)象創(chuàng)建了一個(gè)代理對(duì)象。
實(shí)際開(kāi)發(fā)過(guò)程中，往往需要在更深層次的函數(shù)中獲取外層this的指向。
常規(guī)的解決方案是：將外層函數(shù)的this賦值給一個(gè)局部變量，通會(huì)使用_this,that,self,_self等來(lái)作為變量名保存當(dāng)前作用域中的this。由于在javascript中作用域鏈的存在，嵌套的內(nèi)部函數(shù)可以調(diào)用外部函數(shù)的局部變量，標(biāo)識(shí)符會(huì)去尋找距離作用域鏈末端最近的一個(gè)指向作為其值，示例如下:
document.querySelector('#btn').onclick = function(){
//保存外部函數(shù)中的this
var _this = this;
_.each(dataSet, function(item, index){
//回調(diào)函數(shù)的this指向了全局，調(diào)用外部函數(shù)的this來(lái)操作DOM元素
_this.innerHTML += item;
});
}事件監(jiān)聽(tīng)中this的指向情況其實(shí)是幾種情況的集合，與代碼如何編寫有很大關(guān)系。
1. 在html文件中使用事件監(jiān)聽(tīng)相關(guān)的屬性來(lái)觸發(fā)方法
如果以第一種方式觸發(fā)，則函數(shù)中的this指向全局；
如果以第二種方式觸發(fā),則函數(shù)中的this指向someObj這個(gè)對(duì)象。
2. 在js文件中直接為屬性賦值
//聲明一個(gè)函數(shù)
function callFromHTML() {
console.log('callFromHTML,this指向：',this);
}
//定義一個(gè)對(duì)象方法
var obj = {
callFromObj:function () {
console.log('callFromObj',this);
}
}
//注冊(cè)事件監(jiān)聽(tīng)-方式1
document.querySelector('#btn').onclick = function (event) {
console.log(this);
}
//注冊(cè)事件監(jiān)聽(tīng)-方式2
document.querySelector('#btn').onclick = callFromHTML;
//注冊(cè)事件監(jiān)聽(tīng)-方式3
document.querySelector('#btn').onclick = obj.callFromObj;
以上三種注冊(cè)的事件監(jiān)聽(tīng)響應(yīng)函數(shù)，其this均指向id="btn"的DOM元素。
3. 使用addEventListener方法注冊(cè)響應(yīng)函數(shù)
//低版本IE瀏覽器中需要使用另外的方法
document.querySelector('#btn').addEventListener('click',function(event){
console.log(this);
});
//也可以將函數(shù)名或?qū)ο蠓椒ㄗ鳛榛卣{(diào)函數(shù)傳入
document.querySelector('#btn').addEventListener('click',callFromHTML);
document.querySelector('#btn').addEventListener('click',obj.callFromObj);這種方式注冊(cè)的響應(yīng)函數(shù)，其this與場(chǎng)景2相同，均指向id="btn"的DOM元素。區(qū)別在于使用addEventListener方法添加的響應(yīng)函數(shù)會(huì)依次執(zhí)行，而采用場(chǎng)景2的方式時(shí)，只有最后一次賦值的函數(shù)會(huì)被調(diào)用。
1. 通過(guò)標(biāo)簽屬性注冊(cè)
在html中綁定事件處理程序，然后當(dāng)按鈕點(diǎn)擊時(shí)，在控制臺(tái)打印出DOM對(duì)象的onclick屬性,可以看到：
這種綁定方式其實(shí)是將監(jiān)聽(tīng)方法包裹在另一個(gè)函數(shù)中去執(zhí)行，相當(dāng)于:
document.querySelector('#btn').onclick = function(event){
callFromHTML();
}這樣上述的表現(xiàn)就不難理解了。
2. 通過(guò)元素對(duì)象屬性注冊(cè)
document在javascript中是一個(gè)對(duì)象，通過(guò)其暴露的查找方法返回的節(jié)點(diǎn)也是一個(gè)對(duì)象，那么方式二綁定的監(jiān)聽(tīng)函數(shù)在運(yùn)行時(shí)，實(shí)際上就是在執(zhí)行指定節(jié)點(diǎn)的onclick方法，根據(jù)this指向的基本規(guī)則可知其函數(shù)體中的this應(yīng)該指向調(diào)用對(duì)象，也就是onclick這個(gè)方法所在的節(jié)點(diǎn)對(duì)象。
3. 通過(guò)addEventListener方法注冊(cè)
這種方式是在DOM2事件模型中擴(kuò)展的，用于支持多個(gè)監(jiān)聽(tīng)器綁定的場(chǎng)景。DOM2事件模型的描述中規(guī)定了通過(guò)這種方式添加的監(jiān)聽(tīng)函數(shù)執(zhí)行時(shí)的this指向所在的節(jié)點(diǎn)對(duì)象，不同內(nèi)核的瀏覽器實(shí)現(xiàn)方式有區(qū)別。
不同的使用方式實(shí)質(zhì)上是伴隨著DOM事件模型升級(jí)而發(fā)生改變的，現(xiàn)代瀏覽器對(duì)于以上幾種模式都是支持的，只有需要兼容老版本瀏覽器時(shí)需要考慮對(duì)DOM事件模型的支持程度。開(kāi)發(fā)中DOM2級(jí)事件模型中addEventListener()和removeEventListener()來(lái)管理事件監(jiān)聽(tīng)函數(shù)是最為推薦的方法。
1. setTimeout( )和setInterval( )
這里的情況相當(dāng)于上文中的回調(diào)函數(shù)的情況。
2. 事件監(jiān)聽(tīng)
詳見(jiàn)第7章。
3. ajax請(qǐng)求
幾乎沒(méi)有遇到過(guò)。
4. Promise
這里的情況相當(dāng)于上文中的回調(diào)函數(shù)的情況。
箭頭函數(shù)是ES6標(biāo)準(zhǔn)中支持的語(yǔ)法，它的誕生不僅僅是因?yàn)楸磉_(dá)方式簡(jiǎn)潔，也是為了更好地支持函數(shù)式編程。箭頭函數(shù)內(nèi)部不綁定this,arguments,super,new.target，所以由于作用域鏈的機(jī)制，箭頭函數(shù)的函數(shù)體中如果使用到this,則執(zhí)行引擎會(huì)沿著作用域鏈去獲取外層的this。
Nodejs是一種脫離瀏覽器環(huán)境的javascript運(yùn)行環(huán)境，this的指向規(guī)則上與瀏覽器環(huán)境在全局對(duì)象的指向上存在一定差異。
1. 全局對(duì)象global
Nodejs的運(yùn)行環(huán)境并不是瀏覽器，所以程序里沒(méi)有DOM和BOM對(duì)象，Nodejs中也存在全局作用域，用來(lái)定義一些不需要通過(guò)任何模塊的加載即可使用的變量、函數(shù)或類，全局對(duì)象中多為一些系統(tǒng)級(jí)的信息或方法，例如獲取當(dāng)前模塊的路徑，操作進(jìn)程，定時(shí)任務(wù)等等。
2. 文件級(jí)this指向
Nodejs是支持模塊作用域的，每一個(gè)文件都是一個(gè)模塊，可通過(guò)require( )的方式同步引入，通過(guò)module.exports來(lái)暴露接口供其他模塊調(diào)用。在一個(gè)文件中最頂級(jí)的this指向當(dāng)前這個(gè)文件模塊對(duì)外暴露的接口對(duì)象，也就是module.exports指向的對(duì)象。示例:
var IronMan = {
name:'Tony Stark',
attack: function(){
}
}
exports.IronMan = IronMan;
console.log(this);在控制臺(tái)即可看到，this指向一個(gè)對(duì)象，對(duì)象中只有一個(gè)屬性IronMan,屬性值為文件中定義的IronMan這個(gè)對(duì)象。
3. 函數(shù)級(jí)this指向
this的基本規(guī)則中有一條—當(dāng)作為函數(shù)調(diào)用時(shí)，函數(shù)中的this指向全局對(duì)象，這一條在nodejs中也是成立的，這里的this指向了全局對(duì)象（此處的全局對(duì)象Global對(duì)象是有別于模塊級(jí)全局對(duì)象的）。
如果你嘗試使用過(guò)React進(jìn)行前端開(kāi)發(fā)，一定見(jiàn)過(guò)下面這樣的代碼：
//假想定義一個(gè)ToggleButton開(kāi)關(guān)組件
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(
)
}
}思考題：構(gòu)造方法中為什么要給所有的實(shí)例方法綁定this呢？（強(qiáng)烈建議讀者先自己思考再看筆者分析）
1. 代碼執(zhí)行的細(xì)節(jié)
上例僅僅是一個(gè)組件類的定義，當(dāng)在其他組件中調(diào)用或是使用ReactDOM.render( )方法將其渲染到界面上時(shí)會(huì)生成一個(gè)組件的實(shí)例，因?yàn)榻M件是可以復(fù)用的，面向?qū)ο蟮木幊谭绞椒浅＿m合它的定位。根據(jù)this指向的基本規(guī)則就可以知道，這里的this最終會(huì)指向組件的實(shí)例。
組件實(shí)例生成的時(shí)候，構(gòu)造器constructor會(huì)被執(zhí)行，此處著重分析一下下面這行代碼：
this.handleClick = this.handleClick.bind(this);此時(shí)的this指向新生成的實(shí)例，那么賦值語(yǔ)句右側(cè)的表達(dá)式先查找this.handleClick( )這個(gè)方法，由對(duì)象的屬性查找機(jī)制（沿原型鏈由近及遠(yuǎn)查找）可知此處會(huì)查找到原型方法this.handleClick( ),接著執(zhí)行bind(this)，此處的this指向新生成的實(shí)例，所以賦值語(yǔ)句右側(cè)的表達(dá)式計(jì)算完成后，會(huì)生成一個(gè)指定了this的新方法，接著執(zhí)行賦值操作，將新生成的函數(shù)賦值給實(shí)例的handleClick屬性，由對(duì)象的賦值機(jī)制可知，此處的handleClick會(huì)直接作為實(shí)例屬性生成?？偨Y(jié)一下，上面的語(yǔ)句做了一件這樣的事情：
把原型方法handleClick( )改變?yōu)閷?shí)例方法handleClick( ),并且強(qiáng)制指定這個(gè)方法中的this指向當(dāng)前的實(shí)例。
2. 綁定this的必要性
在組件上綁定事件監(jiān)聽(tīng)器，是為了響應(yīng)用戶的交互動(dòng)作，特定的交互動(dòng)作觸發(fā)事件時(shí)，監(jiān)聽(tīng)函數(shù)中往往都需要操作組件某個(gè)狀態(tài)的值，進(jìn)而對(duì)用戶的點(diǎn)擊行為提供響應(yīng)反饋，對(duì)開(kāi)發(fā)者來(lái)說(shuō)，這個(gè)函數(shù)觸發(fā)的時(shí)候，就需要能夠拿到這個(gè)組件專屬的狀態(tài)合集（例如在上面的開(kāi)關(guān)組件ToggleButton例子中，它的內(nèi)部狀態(tài)屬性state.isToggleOn的值就標(biāo)記了這個(gè)按鈕應(yīng)該顯示ON或者OFF），所以此處強(qiáng)制綁定監(jiān)聽(tīng)器函數(shù)的this指向當(dāng)前實(shí)例的也很容易理解。
React構(gòu)造方法中的bind會(huì)將響應(yīng)函數(shù)與這個(gè)組件Component進(jìn)行綁定以確保在這個(gè)處理函數(shù)中使用this時(shí)可以時(shí)刻指向這一組件的實(shí)例。
3. 如果不綁定this
如果類定義中沒(méi)有綁定this的指向,當(dāng)用戶的點(diǎn)擊動(dòng)作觸發(fā)this.handleClick( )這個(gè)方法時(shí)，實(shí)際上執(zhí)行的是原型方法，可這樣看起來(lái)并沒(méi)有什么影響，如果當(dāng)前組件的構(gòu)造器中初始化了state這個(gè)屬性，那么原型方法執(zhí)行時(shí)，this.state會(huì)直接獲取實(shí)例的state屬性，如果構(gòu)造其中沒(méi)有初始化state這個(gè)屬性（比如React中的UI組件），說(shuō)明組件沒(méi)有自身狀態(tài)，此時(shí)即使調(diào)用原型方法似乎也沒(méi)什么影響。
事實(shí)上的確是這樣，這里的bind(this)所希望提前規(guī)避的，就是第五章中的this指針丟失的問(wèn)題。
例如使用解構(gòu)賦值的方式獲取某個(gè)屬性方法時(shí)，就會(huì)造成引用轉(zhuǎn)換丟失this的問(wèn)題:
const toggleButton = new ToggleButton();
import {handleClick} = toggleButton;上例中解構(gòu)賦值獲取到的handleClick這個(gè)方法在執(zhí)行時(shí)就會(huì)報(bào)錯(cuò)，Class的內(nèi)部是強(qiáng)制運(yùn)行在嚴(yán)格模式下的，此處的this在賦值中丟失了原有的指向，在運(yùn)行時(shí)指向了undefined，而undefined是沒(méi)有屬性的。
另一個(gè)存在的限制，是沒(méi)有綁定this的響應(yīng)函數(shù)在異步運(yùn)行時(shí)可能會(huì)出問(wèn)題，當(dāng)它作為回調(diào)函數(shù)被傳入一個(gè)異步執(zhí)行的方法時(shí)，同樣會(huì)因?yàn)閬G失了this的指向而引發(fā)錯(cuò)誤。
如果沒(méi)有強(qiáng)制指定組件實(shí)例方法的
this，在將來(lái)的使用中就無(wú)法安心使用引用轉(zhuǎn)換或作為回調(diào)函數(shù)傳遞這樣的方式，對(duì)于后續(xù)使用和協(xié)作開(kāi)發(fā)而言都是不方便的。
[1]《javascript高級(jí)程序設(shè)計(jì)（第三版）》
[2]《深入理解javascript函數(shù)系列第二篇》https://www.cnblogs.com/xiaohuochai/p/5706289.html
[3]《ES6-Class基本語(yǔ)法》https://www.cnblogs.com/ChenChunChang/p/8296350.html
