今日頭條：https://m.jb51.net/article/105340.htm
新增連結描述
ES6標準新增了一種新的函式：Arrow Function（箭頭函式）。那麼下面這篇文章主要給大家介紹了箭頭函式中this的相關資料，有需要的朋友可以參考借鑑，下面來一起看看吧。
首先我們先看一段程式碼，這是一個實現倒數功能的類「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();
 

執行這段程式碼時，將會出現異常「this._step is not a function」。

這是Javascript中頗受詬病的「this錯亂」問題：setInterval重複執行的函式中的this已經跟外部的this不一致了。

要解決這個問題，有三個方法。

閉包

新增一個變數指向期望的this，然後將該變數放到閉包中：

Countdown.prototype.start = function() {
 var self = this;
 this._step();
 this._timer = setInterval(function() {
  self._step();
 }, 1000);
};
 

bind函式

ES5給函式型別新增的「bind」方法可以改變函式（實際上是返回了一個新的函式）的「this」：

Countdown.prototype.start = function() {
  this._step();
  this._timer = setInterval(function() {
    this._step();
  }.bind(this), 1000);
};

箭頭函式

這正是本文要重點介紹的解決方案。箭頭函式是ES6中新增的語言特性，表面上看，它只是使匿名函式的編碼更加簡短，但實際上它還隱藏了一個非常重要的細節——箭頭函式會捕獲其所在上下文的this作為自己的this。也就是說，箭頭函式內部與其外部的this是保持一致的。

所以，解決方案如下：

Countdown.prototype.start = function() {
  this._step();
  this._timer = setInterval(() => {
    this._step();
  }, 1000);
};

這無疑使this的處理更加方便了。然而，對各位Javascript Coder而言，判斷this指向時的情況可就又多了一種了。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。