ES6 箭頭函數(shù)你正確使用了嗎
作者：歸子莫
來源：SegmentFault 思否社區(qū)
ES6 箭頭函數(shù)你正確使用了嗎
博客說明
文章所涉及的資料來自互聯(lián)網(wǎng)整理和個(gè)人總結(jié)，意在于個(gè)人學(xué)習(xí)和經(jīng)驗(yàn)匯總，如有什么地方侵權(quán)，請(qǐng)聯(lián)系本人刪除，謝謝！
說明
在ES6中允許使用“箭頭”（=>）定義函數(shù)，所以在我們后續(xù)寫代碼的過程中出現(xiàn)的很多的箭頭函數(shù)，因?yàn)檎嫦悖〉且矌淼囊恍﹩栴}，靈魂拷問，你真的了解箭頭函數(shù)嗎？因?yàn)椴桓铱隙ㄗ鞔穑蚀藭?/span>
箭頭函數(shù)
一個(gè)簡(jiǎn)單箭頭函數(shù)
// es6
const hello = item => item;
// es5 上面的代碼等同于
const hello = function (item) {
return item;
};
用法(三大如果)
如果箭頭函數(shù)不需要參數(shù)或需要多個(gè)參數(shù)，就使用一個(gè)圓括號(hào)代表參數(shù)部分。
const hello = () => 'hello';
const sum = (num1, num2) => num1 + num2;
如果箭頭函數(shù)的代碼塊部分多于一條語句，就要使用大括號(hào)將它們括起來，并且使用return語句返回。
const sum = (num1, num2) => {
let num = 0;
if(num1 && num2){
num = num1 + num2;
}
return num;
}
如果箭頭函數(shù)直接返回一個(gè)對(duì)象，必須在對(duì)象外面加上括號(hào)，否則會(huì)報(bào)錯(cuò)。
const getInfo = id => ({ id: id, name: "hello" });
四大注意點(diǎn)
以下四點(diǎn)可能被無數(shù)次的提及，并且出現(xiàn)在各大面試題當(dāng)中，不錯(cuò)，今天又來了一次。
箭頭函數(shù)沒有自己的 this對(duì)象不可以當(dāng)作構(gòu)造函數(shù)，不可以使用 new命令不可以使用 arguments對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在。如果要用，可以用 rest 參數(shù)代替不可以使用 yield命令，因此箭頭函數(shù)不能用作 Generator 函數(shù)
箭頭函數(shù)的this指向
this指向函數(shù)運(yùn)行時(shí)所在的對(duì)象。箭頭函數(shù)沒有自己的this對(duì)象，內(nèi)部的this就是定義時(shí)上層作用域中的this。this指向是固定的，相比之下，普通函數(shù)的this指向是可變的。將ES6轉(zhuǎn)成ES5
// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
// ES5
function foo() {
var _this = this;
setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}
function test() {
this.s1 = 0;
this.s2 = 0;
// 箭頭函數(shù)
setInterval(() => this.s1++, 1000);
// 普通函數(shù)
setInterval(function () {
this.s2++;
}, 1000);
}
s1 // 1
s2 // 0// 普通函數(shù)
setInterval(function () {
let _this = this;
_this.s2++;
}, 1000);
不能作為構(gòu)造函數(shù)
this，拿甚構(gòu)造？所以箭頭函數(shù)也就不能用作構(gòu)造函數(shù)。也不能使用new關(guān)鍵詞。不可以使用arguments對(duì)象
arguments指向外層函數(shù)的對(duì)應(yīng)變量，像類似的兄弟還有super、new.targetfunction hello() {
setTimeout(() => {
console.log('args:', arguments);
}, 1000);
}
hello(1,2,3,4)
// args: [1, 2, 3, 4]call()、apply()、bind()這些方法去改變this的指向，因此箭頭函數(shù)的this是”靜態(tài)“的。箭頭函數(shù)的好與壞
this對(duì)象一直是一個(gè)令人頭痛的問題，使用時(shí)小心翼翼，回調(diào)一多，代碼就糊了。正是因?yàn)檫@個(gè)”靜態(tài)“的this的出現(xiàn)，改善了這一些問題。
評(píng)論
圖片
表情