您好,登錄后才能下訂單哦!
小編給大家分享一下Javascript箭頭函數(shù)中this的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
首先我們先看一段代碼,這是一個實現(xiàn)倒數(shù)功能的類「Countdown」及其實例化的過程:
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ù))的「this」:
Countdown.prototype.start = function() { this._step(); this._timer = setInterval(function() { this._step(); }.bind(this), 1000); };
箭頭函數(shù)
這正是本文要重點介紹的解決方案。箭頭函數(shù)是ES6中新增的語言特性,表面上看,它只是使匿名函數(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指向時的情況可就又多了一種了。
以上是“Javascript箭頭函數(shù)中this的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。