ES6 箭頭函數

箭頭函數的語法:標識符 => 表達式javascript

([param] [, param]) => { statements } param => expression

param 是參數,根據參數個數不一樣,分這幾種狀況: 
() => { … } // 零個參數用 () 表示; 
x => { … } // 一個參數能夠省略 (); 
(x, y) => { … } // 多參數不能省略 ();php

使用了塊語句的函數不會有返回值,要用return返回。java

箭頭函數

ES6標準新增了一種新的函數:Arrow Function(箭頭函數)。

爲何叫Arrow Function?由於它的定義用的就是一個箭頭:express

x => x * x 

上面的箭頭函數至關於:app

function (x) { return x * x; }

箭頭函數至關於匿名函數,而且簡化了函數定義。箭頭函數有兩種格式,一種像上面的,只包含一個表達式,連{ ... }return都省略掉了。還有一種能夠包含多條語句,這時候就不能省略{ ... }return函數

x => {
    if (x > 0) { return x * x; } else { return - x * x; } } 

若是參數不是一個,就須要用括號()括起來:this

// 兩個參數: (x, y) => x * x + y * y // 無參數: () => 3.14 // 可變參數: (x, y, ...rest) => { var i, sum = x + y; for (i=0; i<rest.length; i++) { sum += rest[i]; } return sum; } 

若是要返回一個對象,就要注意,若是是單表達式,這麼寫的話會報錯:spa

// SyntaxError: x => { foo: x } 

由於和函數體的{ ... }有語法衝突,因此要改成:rest

// ok: x => ({ foo: x }) 

this

箭頭函數看上去是匿名函數的一種簡寫,但實際上,箭頭函數和匿名函數有個明顯的區別:箭頭函數內部的this是詞法做用域,由上下文肯定。code

回顧前面的例子,因爲JavaScript函數對this綁定的錯誤處理,下面的例子沒法獲得預期結果:

var obj = { birth: 1990, getAge: function () { var b = this.birth; // 1990 var fn = function () { return new Date().getFullYear() - this.birth; // this指向window或undefined }; return fn(); } }; 

如今,箭頭函數徹底修復了this的指向,this老是指向詞法做用域,也就是外層調用者obj

var obj = { birth: 1990, getAge: function () { var b = this.birth; // 1990 var fn = () => new Date().getFullYear() - this.birth; // this指向obj對象 return fn(); } }; obj.getAge(); // 25 

若是使用箭頭函數,之前的那種hack寫法:

var that = this; 

就再也不須要了。

因爲this在箭頭函數中已經按照詞法做用域綁定了,因此,用call()或者apply()調用箭頭函數時,沒法對this進行綁定,即傳入的第一個參數被忽略:

轉:https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001438565969057627e5435793645b7acaee3b6869d1374000var obj = { birth: 1990, getAge: function (year) { var b = this.birth; // 1990 var fn = (y) => y - this.birth; // this.birth還是1990 return fn.call({birth:2000}, year); } }; obj.getAge(2015); // 25
相關文章
相關標籤/搜索