基礎語法
(1)(參數(shù)1, 參數(shù)2, …, 參數(shù)N) => { 函數(shù)聲明 }
相當于:(參數(shù)1, 參數(shù)2, …, 參數(shù)N) =>{ return 表達式; }
(參數(shù)1, 參數(shù)2, …, 參數(shù)N) => 表達式(單一)
(2) 當只有一個參數(shù)時芳悲,圓括號是可選的:
(單一參數(shù)) => {函數(shù)聲明}
單一參數(shù) => {函數(shù)聲明}
(3)沒有參數(shù)的函數(shù)應該寫成一對圓括號删顶。
() => {函數(shù)聲明}
高級語法
//加括號的函數(shù)體返回對象字面表達式:參數(shù)=> ({foo: bar})
//支持剩余參數(shù)和默認參數(shù)(參數(shù)1, 參數(shù)2, ...rest) => {函數(shù)聲明}(參數(shù)1 = 默認值1,參數(shù)2, …, 參數(shù)N = 默認值N) => {函數(shù)聲明}
//同樣支持參數(shù)列表解構(gòu)let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;f(); // 6
箭頭函數(shù)的作用
引入箭頭函數(shù)有兩個方面的作用:更簡短的函數(shù)并且不綁定this帮寻。
Array.prototype.map()//
map() 方法創(chuàng)建一個新數(shù)組偏陪,其結(jié)果是該數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結(jié)果夜郁。
eg:
var elements = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'];
elements.map(function(element){
return element.length;
});//返回數(shù)組:[8,6,7,9]
//上面的普通改寫為箭頭函數(shù)為:
elements.map((element)=>{
return element.length;
});
// 當箭頭函數(shù)只有一個參數(shù)時西轩,可以省略參數(shù)的圓括號
elements.map(element=>{
return element.length;
});
// 當箭頭函數(shù)的函數(shù)體只有一個 `return` 語句時奕筐,可以省略 `return` 關(guān)鍵字和方法體的花括號
elements.map(element => element.length);
// 在這個例子中岛啸,因為我們只需要 `length` 屬性泪酱,所以可以使用參數(shù)解構(gòu)// 需要注意的是字符串 `"length"` 是我們想要獲得的屬性的名稱派殷,而 `lengthFooBArX` 則只是個變量名,// 可以替換成任意合法的變量名
elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]
不綁定this
在箭頭函數(shù)出現(xiàn)之前墓阀,每個新定義的函數(shù)都有它自己的 this值(在構(gòu)造函數(shù)的情況下是一個新對象毡惜,在嚴格模式的函數(shù)調(diào)用中為 undefined,如果該函數(shù)被作為“對象方法”調(diào)用則為基礎對象等)斯撮。This被證明是令人厭煩的面向?qū)ο箫L格的編程经伙。
function Person(){
//Peron()構(gòu)造函數(shù)定義'this'作為它自己的實例
this.age = 0;
setInterval(function growUp(){
// 在非嚴格模式, growUp()函數(shù)定義 `this`作為全局對象,
// 與在 Person()構(gòu)造函數(shù)中定義的 `this`并不相同.
this.age++;
},1000);
}
var p = new Person();
箭頭函數(shù)不會創(chuàng)建自己的this,它只會從自己的作用域鏈的上一層繼承this。因此勿锅,在下面的代碼中帕膜,傳遞給setInterval的函數(shù)內(nèi)的this與封閉函數(shù)中的this值相同:
function Person(){
this.age = 0;
setInterval(() => {
this.age++;//this正確的指向p實例
},1000)
}
var p = new Person();
與嚴格模式的關(guān)系
鑒于 this 是詞法層面上的枣氧,嚴格模式中與 this 相關(guān)的規(guī)則都將被忽略。
function Person(){
this.age = 0;
var closure = '123';
setInterval(function growUp() {
this.age++;
console.log(closure)
}, 1000);
}
var p = new Person();
function PersonX(){
'use strict'
this.age = 0;
var closure = "123"
setInterval(()=>{
this.age++;
console.log(closure)
}, 1000);
}
var px = new PersonX();
通過用call或apply調(diào)用
由于 箭頭函數(shù)沒有自己的this指針垮刹,通過 call() 或 apply() 方法調(diào)用一個函數(shù)時达吞,只能傳遞參數(shù)(不能綁定this---譯者注),他們的第一個參數(shù)會被忽略荒典。(這種現(xiàn)象對于bind方法同樣成立---譯者注)
var adder = {
base : 1,
add : function(a){
var f = v => v+ this.base;
return f(a);
},
addThruCall : function(a){
var f = v => v + this.base;
var b = {
base : 2
};
return f.call(b,a);
}
};
console.log(adder.add(1)); // 輸出 2
console.log(adder.addThruCall(1)); // 仍然輸出 2,而不是3
不綁定arguments
箭頭函數(shù)不綁定Arguments 對象酪劫。因此,在本示例中种蝶,arguments只是引用了封閉作用域內(nèi)的arguments:
var arguments = [1,2,3];
var arr = () => arguments[0];
arr();//1
function foo(n) {
var f = () => arguments[0] + n; // 隱式綁定 foo 函數(shù)的 arguments 對象. arguments[0] 是 n
return f();}
foo(1); // 2