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函數。