參考
JavaScript-ES6中的箭頭函數(shù)（Arrow Function）
一席楚、實(shí)例
可以在https://www.tslang.cn/點(diǎn)擊 練習(xí)觀察ES6的箭頭函數(shù)和ES5之間的對(duì)應(yīng)。
1.當(dāng)你只需要一個(gè)只有一個(gè)參數(shù)的簡(jiǎn)單函數(shù)時(shí)秘蛇，可以使用新標(biāo)準(zhǔn)中的箭頭函數(shù)，它的語(yǔ)法非常簡(jiǎn)單：標(biāo)識(shí)符=>表達(dá)式匙瘪。你無需輸入function和return索昂，一些小括號(hào)、大括號(hào)以及分號(hào)也可以省略俺夕。
// ES5
var selected = allJobs.filter(function (job) {
return job.isSelected();
});
// ES6
var selected = allJobs.filter(job => job.isSelected());
2.如果要寫一個(gè)接受多重參數(shù)（也可能沒有參數(shù)裳凸，或者是不定參數(shù)、默認(rèn)參數(shù)劝贸、參數(shù)解構(gòu)）的函數(shù)姨谷，你需要用小括號(hào)包裹參數(shù)list。
// ES5
var total = values.reduce(function (a, b) {
return a + b;
}, 0);
// ES6
var total = values.reduce((a, b) => a + b, 0);
3.那么不是非常函數(shù)化的情況又如何呢映九？除表達(dá)式外梦湘，箭頭函數(shù)還可以包含一個(gè)塊語(yǔ)句启绰≌悖回想一下我們之前的示例：
// ES5
$("#confetti-btn").click(function (event) {
playTrumpet();
fireConfettiCannon();
});
// ES6
$("#confetti-btn").click(event => {
playTrumpet();
fireConfettiCannon();
});
注意茅逮，使用了塊語(yǔ)句的箭頭函數(shù)不會(huì)自動(dòng)返回值膊存，你需要使用return語(yǔ)句將所需值返回。
二禁灼、新的箭頭函數(shù)的語(yǔ)法管挟，不止是語(yǔ)法上的簡(jiǎn)便，還解決了this的指向問題
1.讓我們假設(shè)我們有一個(gè)對(duì)象有一個(gè)叫做sayLater的函數(shù)
let obj = {
name: "asim",
sayLater: function() {
console.log(`${this.name}`);
}
};
obj.sayLater();
在sayLater函數(shù)中弄捕，這個(gè)this的指向是obj,所以console.log的值為asim.現(xiàn)在讓我們來試一下用setTimeout函數(shù)輸出的值是多少
let obj = {
name: "asim",
sayLater: function () {
setTimeout(function () {
console.log(`${this.name}`);
}, 1000);
}
};
obj.sayLater();
但是上面輸出的值確實(shí)undefined
2.調(diào)用上下文
這個(gè)結(jié)果取決于這個(gè)函數(shù)的調(diào)用方式.在最基本的調(diào)用上obj.sayLater()僻孝，這個(gè)值是調(diào)用上下文，值為obj.那在setTimeout的匿名函數(shù)中呢守谓？this會(huì)指向什么呢穿铆？
setTimeout(function () {
console.log(`${this.name}`);
}, 1000);
他的答案就看情況了，在瀏覽器中斋荞，值是undefined或者是global對(duì)象荞雏，這個(gè)取決于是使用'use strict'或者非嚴(yán)格模式下，在node中他是一個(gè)超時(shí)對(duì)象平酿。所以在setTimeout的例子中凤优，this的值不會(huì)是obj，所以最后this.name返回的要么就是undefined或者是報(bào)錯(cuò)了蜈彼。這樣不穩(wěn)定的語(yǔ)法是個(gè)頭疼的問題筑辨，也是javascript一直存在的問題，在es5中有很多方法解決這個(gè)問題幸逆，但是一般比較常用的方法就是棍辕，在調(diào)用上面聲明個(gè)變量，一般叫做self或者vm还绘，然后把這個(gè)用在函數(shù)中
let obj = {
name: "asim",
sayLater: function () {
let self = this; // Assign to self
console.log(self);
setTimeout(function () {
console.log(`${self.name}`); // Use self not this
}, 1000);
}
};
但是在es6中楚昭，我們有更好的方式解決這個(gè)問題，如果我們使用箭頭函數(shù)蚕甥，那箭頭函數(shù)里面的this的值和外面的值是一樣的
let obj = {
name: "asim",
sayLater: function () {
console.log(this); // `this` points to obj
setTimeout(() => {
console.log(this); // `this` points to obj
console.log(`${this.name}`); // `this` points to obj
}, 1000);
}
};
obj.sayLater();
可以嘗試著跑以上的代碼哪替，就發(fā)現(xiàn)this輸出來的都是obj
再看一個(gè)例子
var foo = {
arr:[1,2,3],
sum:0,
testA:function(){
this.arr.forEach(function(x){
this.sum += x;//這里的this指向的不是foo
});
alert(this.sum);//0
},
testB:function(){
this.arr.forEach(x => this.sum+=x);//this指向的是foo
alert(this.sum);//6
}
};
foo.testA();
foo.testB();
