作者簡(jiǎn)介：
李中凱
八年多工作經(jīng)驗(yàn) 前端負(fù)責(zé)人罕拂，
擅長(zhǎng)JavaScript/Vue誓焦。
掘金文章專欄：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts
公眾號(hào)：1024譯站
我們都知道鲜侥，在 JavaScript 里定義函數(shù)有多種方式涯雅。最常見的是用function關(guān)鍵字：
// 函數(shù)聲明
function sayHi(someone) {
return Hello, ${someone}!;
}
// 函數(shù)表達(dá)式
const sayHi = function(someone) {
return Hello, ${someone};
}
上面的函數(shù)聲明和函數(shù)表達(dá)式外构，我們姑且稱之為常規(guī)函數(shù)帆吻。
還有就是 ES6 新增的箭頭函數(shù)語(yǔ)法：
const sayHi = (someone) => {
return Hello, ${someone}!;
}
既然常規(guī)形式和箭頭語(yǔ)法都能定義函數(shù)域那，我們?cè)撊绾芜x擇呢？
這篇文章總結(jié)了它們之間的關(guān)鍵區(qū)別猜煮，下次你選擇的時(shí)候心里就有數(shù)了琉雳。
1
this 指向
常規(guī)函數(shù)里的 this （即執(zhí)行上下文）指向是動(dòng)態(tài)的。這也是面試秤蚜觯考問題之一翠肘。動(dòng)態(tài)的意思就是，this的值取決于函數(shù)本身如何被調(diào)用辫秧。JavaScript 里調(diào)用常規(guī)函數(shù)通常有 4 種方式束倍。
第一種是最簡(jiǎn)單的直接調(diào)用，this指向全局對(duì)象（在嚴(yán)格模式下是undefined）：
function myFunction() {
console.log(this);
}
// 簡(jiǎn)單調(diào)用
myFunction(); // 全局對(duì)象 (window)
第二種是作為對(duì)象方法調(diào)用盟戏，this指向方法所屬對(duì)象：
const myObject = {
method() {
console.log(this);
}
};
// 對(duì)象方法調(diào)用
myObject.method(); // "myObject"
第三種是動(dòng)態(tài)改變執(zhí)行上下文的方式調(diào)用绪妹，即通過.call和.apply，this指向第一個(gè)參數(shù)代表的上下文對(duì)象：
function myFunction() {
console.log(this);
}
const myContext = { value: 'A' };
myFunction.call(myContext); // { value: 'A' }
myFunction.apply(myContext); // { value: 'A' }
第四種是作為構(gòu)造函數(shù)調(diào)用柿究，this指向通過new關(guān)鍵字創(chuàng)建的實(shí)例：
function MyFunction() {
console.log(this);
}
new MyFunction(); // MyFunction 的實(shí)例
箭頭函數(shù)的this跟常規(guī)函數(shù)的規(guī)則完全不同邮旷。無論用什么方式、在哪調(diào)用箭頭函數(shù)蝇摸，里面的this永遠(yuǎn)等于外層函數(shù)的this婶肩。換句話說，箭頭函數(shù)的this是由詞法決定的貌夕，它沒有定義自己的執(zhí)行上下文律歼。
下面的例子中， myMethod()就是箭頭函數(shù)callback()的外層函數(shù)：
const myObject = {
myMethod(items) {
console.log(this); // "myObject"
const callback = () => {
console.log(this); // "myObject"
};
items.forEach(callback);
}
};
myObject.myMethod([1, 2, 3]);
因此啡专，箭頭函數(shù)里的 this 等于外層函數(shù)的this险毁，也就是myObject。
由詞法決定this的指向们童，是箭頭函數(shù)非常實(shí)用的特性之一畔况。在方法里使用回調(diào)函數(shù)時(shí)就特別方便，this指向很明確慧库，再也不用寫const self = this或者callback.bind(this)這種啰嗦的代碼了跷跪。
2
構(gòu)造函數(shù)
常規(guī)函數(shù)可作為類的構(gòu)造函數(shù)，用于創(chuàng)建實(shí)例：
function Cat(color) {
this.color = color;
}
const blackCat = new Car('black');
blackCat instanceof Cat; // => true
前面說了完沪，箭頭函數(shù)的this是由詞法決定的域庇，沒有自己的指向上下文，因此不能用作構(gòu)造函數(shù)覆积。如果對(duì)箭頭函數(shù)使用new關(guān)鍵字听皿，會(huì)報(bào)錯(cuò)：
const Cat = (color) => {
this.color = color;
};
const blackCat = new Cat('black'); // TypeError: Cat is not a constructor
3
arguments 對(duì)象
常規(guī)函數(shù)中，arguments是一個(gè)類數(shù)組對(duì)象宽档，包含了函數(shù)在執(zhí)行時(shí)接收到的參數(shù)列表尉姨。
例如：
function myFunction() {
console.log(arguments);
}
myFunction(1, 2); // { 0: 1, 1: 2}
而箭頭函數(shù)中沒有定義 arguments 關(guān)鍵字，跟this一樣吗冤，也是由詞法決定的又厉，也就是會(huì)解析到外層函數(shù)的 arguments 。
function myRegularFunction() {
const myArrowFunction = () => { console.log(arguments); }
myArrowFunction('c', 'd');
}
myRegularFunction('a', 'b'); // { 0: 'a', 1: 'b' }
如果你想獲取箭頭函數(shù)自己的參數(shù)對(duì)象椎瘟，可以用 ES6 的剩余參數(shù)（...操作符）特性：
function myRegularFunction() {
const myArrowFunction = (...args) => { console.log(args); }
myArrowFunction('c', 'd');
}
myRegularFunction('a', 'b'); // { 0: 'c', 1: 'd' }
4
隱式返回值
對(duì)于常規(guī)函數(shù)覆致，需要用 return語(yǔ)句返回一個(gè)值：
function myFunction() {
return 42;
}
myFunction(); // => 42
如果沒有return語(yǔ)句，或者return語(yǔ)句后面沒有帶表達(dá)式肺蔚，常規(guī)函數(shù)會(huì)隱式返回undefine：
function myEmptyFunction() {
42;
}
function myEmptyFunction2() {
42;
return;
}
myEmptyFunction(); // => undefined
myEmptyFunction2(); // => undefined
箭頭函數(shù)除了可以用常規(guī)函數(shù)一樣的方式返回值之外煌妈，還有一個(gè)獨(dú)有的特性：如果箭頭函數(shù)只包含一個(gè)表達(dá)式，那么就可以省略函數(shù)體的花括號(hào)和return語(yǔ)句宣羊，并且這個(gè)表達(dá)式會(huì)被當(dāng)作返回值璧诵。
const increment = (num) => num + 1;
increment(41); // => 4
5
成員方法
我們通常用常規(guī)函數(shù)來定義類的成員方法：
class Coder {
constructor(nickName) {
this.nickName = nickName;
}
logName() { console.log(this.nickName); }
}
const coder = new Coder('Kayson');
但有時(shí)候我們需要把成員方法當(dāng)成回調(diào)函數(shù)來用，比如 setTimeout()回調(diào)或者事件監(jiān)聽器仇冯。這個(gè)時(shí)候之宿，如果要訪問當(dāng)前實(shí)例 this 就會(huì)有問題了。
比如苛坚，我們把 logName() 方法當(dāng)作 setTimeout()的回調(diào)函數(shù)：
setTimeout(coder.logName, 1000);
// 1 秒后輸出 "undefined"
定時(shí)器在1秒后執(zhí)行實(shí)例的方法 logName比被，這個(gè)時(shí)候方法已經(jīng)跟實(shí)例分離了，this不再是實(shí)例泼舱，而是全局對(duì)象姐赡，全局對(duì)象上沒有nickName屬性，因此輸出undefined柠掂。
怎么辦呢项滑？可以用函數(shù)上的bind方法，指定函數(shù)的執(zhí)行上下文為當(dāng)前實(shí)例：
setTimeout(coder.logName.bind(coder), 1000);
// 1 秒后輸出 "Kayson"
手動(dòng)綁定this執(zhí)行上下文有點(diǎn)麻煩涯贞，每個(gè)方法都需要這么做枪狂。有沒有更好的辦法呢？答案你可能猜到了宋渔，用箭頭函數(shù)作為成員方法州疾。這是 TC39 Class 字段提案的內(nèi)容，目前處于 stage 3 階段皇拣。
箭頭函數(shù)里的this直接指向類的實(shí)例對(duì)象了：
class Coder {
constructor(nickName) {
this.nickName= nickName;
}
logName = () => { console.log(this.nickName); }
}
const coder = new Coder('Kayson');
現(xiàn)在coder.logName作為回調(diào)函數(shù)不再需要手動(dòng)綁定this執(zhí)行上下文严蓖，它總是指向當(dāng)前類的實(shí)例：
setTimeout(coder.logName, 1000);
// 1 秒后輸出 "Kayson"
總結(jié)
本文總結(jié)了箭頭函數(shù)和常規(guī)函數(shù) 5 個(gè)方面的區(qū)別薄嫡，分別是this指向、構(gòu)造函數(shù)颗胡、arguments對(duì)象毫深、隱式返回值和類成員方法。箭頭函數(shù)雖然簡(jiǎn)潔毒姨、方便哑蔫，但也有自己的局限性，要分情況使用弧呐。
作者簡(jiǎn)介：
李中凱
八年多工作經(jīng)驗(yàn) 前端負(fù)責(zé)人闸迷，
擅長(zhǎng)JavaScript/Vue。
掘金文章專欄：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts
公眾號(hào)：1024譯站
本文已經(jīng)獲得李中凱老師授權(quán)轉(zhuǎn)發(fā)俘枫，其他人若有興趣轉(zhuǎn)載腥沽，請(qǐng)直接聯(lián)系作者授權(quán)。
