es6箭頭函數講解

es6箭頭函數的用法

箭頭函數是es6的一種函數的簡寫方法。

如下：

var f = v = > v;
//等同於
var f = function(v){
      return v;
}
var sum = (num1,num2) => num1+num2 ;
//等同於
var sum = function(num1,num2){
      return num1+num2
}
[1,2,3].map(function (x) {
      return x * x;
});

// 箭頭函數寫法
[1,2,3].map(x => x * x);//簡潔了許多

   

從例子我們可以看出，省略了function，花括號‘{}’用‘=>’代替了。這種寫法更簡潔了。

除了簡潔之外，箭頭函數還有另外一個優點，就是函數體內的this的指向始終是指向定義它所在的對象，而不會指向調用它的對象，我們知道es5中的函數是誰執行它，它就指向誰。

es5  eg：

var countdown ={ 'count':10, 'str':'hello!!!', showstr(){ var _this = this; var dom = document.getElementById('dom'); dom.innerHTML= _this.todouble(this.count); setInterval(function(){ var dom=document.getElementById('dom'); dom.innerHTML=_this.todouble(_this.count); _this.count --; if(_this.count <0){ dom.innerHTML=_this.str; } },1000) }, todouble(t){ var t = parseInt(t); if(t<10){ return '0'+t; }else{ return t; } } } countdown.showstr();

如上是一個倒計時完之后顯示一個hello文本的效果，在setInterval里面，如果我們直接寫this的話，這個this是指向window的。因此我們需要在setInterval函數之前先保存_this = this;

當我們使用es6的箭頭函數的時候，就可以直接使用this了

es6  eg：

 //es6的寫法。
     var countdown ={ 'count':10, 'str':'hello!!!', showstr(){ var dom = document.getElementById('dom'); dom.innerHTML= this.todouble(this.count); setInterval(() => { dom.innerHTML= this.todouble(this.count);; this.count --; if(this.count <0){ dom.innerHTML=this.str; return false; } },1000) }, todouble(t){ var t = parseInt(t); if(t<10){ return '0'+t; }else{ return t; } } } countdown.showstr();

上面同樣的代碼改成箭頭函數之后我們在setInterval里面就可以直接使用this了。

箭頭函數里面的this裝換成es5后的代碼如下：

// ES6
function fn() { setTimeout(() => { console.log('id:', this.id); }, 100); } // ES5
function fn() { var _this = this; setTimeout(function () { console.log('id:', _this.id); }, 100); }

上面代碼中，轉換后的ES5版本說明了，箭頭函數里面根本沒有自己的this，而是引用外層的this,由於箭頭函數沒有自己的this，所以也就不能用call()、apply()、bind()這些方法去改變this的指向。

箭頭函數使用的注意的地方：

（1）函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。

（2）不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤。因為箭頭函數的this是由定義它的對象決定的，對象的構造函數是頂層的，它的外層，沒有this可以傳進去給箭頭函數使用。

（3）不可以使用arguments對象，該對象在函數體內不存在。如果要用，可以用Rest參數代替。

（4）不可以使用yield命令，因此箭頭函數不能用作Generator函數。