深入理解Javascript箭頭函數(shù)中的this
首先我們先看一段代碼，這是一個實(shí)現(xiàn)倒數(shù)功能的類「Countdown」及其實(shí)例化的過程：
function Countdown(seconds) {
this._seconds = seconds;
}
Countdown.prototype._step = function() {
console.log(this._seconds);
if (this._seconds > 0) {
this._seconds -= 1;
} else {
clearInterval(this._timer);
}
};
Countdown.prototype.start = function() {
this._step();
this._timer = setInterval(function() {
this._step();
}, 1000);
};
new Countdown(10).start();
運(yùn)行這段代碼時，將會出現(xiàn)異?！?code>this._step is not a function」。
這是Javascript中頗受詬病的「this錯亂」問題：setInterval重復(fù)執(zhí)行的函數(shù)中的this已經(jīng)跟外部的this不一致了。
要解決這個問題，有三個方法。
閉包
新增一個變量指向期望的this，然后將該變量放到閉包中：
Countdown.prototype.start = function() {
var self = this;
this._step();
this._timer = setInterval(function() {
self._step();
}, 1000);
};
bind函數(shù)
ES5給函數(shù)類型新增的「bind」方法可以改變函數(shù)（實(shí)際上是返回了一個新的函數(shù)）的「this」：
Countdown.prototype.start = function() {
this._step();
this._timer = setInterval(function() {
this._step();
}.bind(this), 1000);
};
箭頭函數(shù)
這正是本文要重點(diǎn)介紹的解決方案。箭頭函數(shù)是ES6中新增的語言特性，表面上看，它只是使匿名函數(shù)的編碼更加簡短，但實(shí)際上它還隱藏了一個非常重要的細(xì)節(jié)——箭頭函數(shù)會捕獲其所在上下文的this作為自己的this。也就是說，箭頭函數(shù)內(nèi)部與其外部的this是保持一致的。
所以，解決方案如下：
Countdown.prototype.start = function() {
this._step();
this._timer = setInterval(() => {
this._step();
}, 1000);
};
這無疑使this的處理更加方便了。然而，對各位Javascript Coder而言，判斷this指向時的情況可就又多了一種了。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
今天在工作中需要將某個鏈接給取消實(shí)現(xiàn)只觸發(fā)事件的目的，后來發(fā)現(xiàn)批量取消鏈接等，腳本之家簡單的給整理了下，希望對需要的朋友有所幫助。2011-10-10
JavaScript字符串處理之trim()和replace()詳解
這篇文章主要給大家介紹了關(guān)于JavaScript字符串處理之trim()和replace()的相關(guān)資料,文中介紹的所有這些方法都不會修改原始字符串,而是返回一個新的字符串,需要的朋友可以參考下2024-10-10
使用JavaScript動態(tài)設(shè)置樣式實(shí)現(xiàn)代碼(2)
使用onmouseover和onmouseout事件實(shí)現(xiàn)不同的效果而且是使用js動態(tài)實(shí)現(xiàn)，本文有利于鞏固你js與css方面的知識，感興趣的你可以了解下哦，希望本文對你有所幫助2013-01-01
可是這會引起再因網(wǎng)絡(luò)原因或其他原因使圖片不能正常加載的話 這樣就是再次調(diào)用onerror，基于微軟的一套核心的瀏覽器就會認(rèn)為這是死循環(huán)2009-08-08
這篇文章主要介紹了php 修改密碼實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-05-05
微信小程序?qū)崿F(xiàn)抖音播放效果的實(shí)例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)抖音播放效果的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
微信小程序 調(diào)用微信授權(quán)窗口相關(guān)問題解決
這篇文章主要介紹了微信小程序 調(diào)用微信授權(quán)窗口相關(guān)問題解決,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
Cropper.js進(jìn)階之裁剪后保存至本地實(shí)現(xiàn)示例
這篇文章主要為大家介紹了Cropper.js進(jìn)階之裁剪后保存至本地實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
比較詳細(xì)的javascript DOM 學(xué)習(xí)筆記
看了很多的js dom學(xué)習(xí)資料，發(fā)現(xiàn)這個比較詳細(xì)，特轉(zhuǎn)載給大家學(xué)習(xí)一下2008-06-06
兄弟節(jié)點(diǎn)之間可以通過 previousSibling 和 nextSibling 屬性訪問同一級別上的不同子節(jié)點(diǎn)。這個兄弟節(jié)點(diǎn)是元素還是文本節(jié)點(diǎn)在現(xiàn)代瀏覽器上運(yùn)行是怎么樣的呢？2009-10-10