ES6中箭頭函數的作用

 

我們知道在ES6中，引入了箭頭函數，其本質就是等同有ES5中的函數。類似於下面的寫法： 
let test1=() => “abc”; 
let test2=() => { return “abc”}; 
let sum=(a,b) => a+b;

比如上面的3個ES6的箭頭函數的寫完，如果用ES5就像下面的寫完一樣。 
其實其等同於下面的ES5的寫法：

function test1() {
return "abc"
}

function test2(){
return "abc"
}

function sum(){
return a+b;
}

 

那為什么在ES6中引入了箭頭函數呢？ 最主要的目的就是解決this指針的問題。 
我們知道在ES6中，我們可以創建一個class，如果我們默認在其里面加入一個函數的話，其必須在調用的時候，必須綁定this指針，否則不能訪問當前類的實例里面的屬性。下面舉一個具體的例子，為什么其能解決this指針的問題。 
比如下面一個一個Person類：

function Person() {
  //Person（）構造器定義了`this`指針，指向了其實例本身
  this.age = 0;

  setInterval(function growUp() {
    //在non-strict模式下，growUp()方法定義了‘this’作為一個全局的對象。其
    //不同於Person()構造器生成的‘this’指針
    this.age++;
  }, 1000);
}
var p = new Person();

 

在ECMAScript 3/5中, 這個this的指針問題可以通過顯示的制定this到一個變量，從而把Person()構造器生成的實例this指針，引入到函數中，具體寫完如下：

function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    // The callback refers to the `that` variable of which
    // the value is the expected object.
    //這個回調函數引用了`that`變量，其值就代表的是當前對象，而不是一個全局的     //一個this對象
    that.age++;
  }, 1000);
}

 

這種寫完有點啰嗦和繁雜，那么有沒有更為簡潔的方式呢？直到ES6出現了箭頭函數，才徹底的解決這個問題。下面讓我們看看ES6的箭頭函數如何寫的。

function Person(){
  this.age = 0;

  setInterval(() => {
   // |this| 自動的指向當前Person的構造器生成的Person實例 
   //是不是感覺很簡潔
    this.age++; 
  }, 1000);
}

var p = new Person();