摘要：我們?cè)谛枰獎(jiǎng)討B(tài)上下文的地方不能使用箭頭函數(shù)定義需要?jiǎng)討B(tài)上下文的函數(shù)，構(gòu)造函數(shù)，需要對(duì)象作為目標(biāo)的回調(diào)函數(shù)以及用箭頭函數(shù)難以理解的語(yǔ)句。

從開(kāi)始接觸es6到在項(xiàng)目中使用已經(jīng)有一段時(shí)間了，es6有很多優(yōu)秀的新特性，其中最有價(jià)值的特性之一就是箭頭函數(shù)，他簡(jiǎn)潔的語(yǔ)法以及更好理解的this值都非常的吸引我。但是新事物也是有兩面性的，箭頭函數(shù)有他的便捷有他的優(yōu)點(diǎn)，但是他也有缺點(diǎn)，他的優(yōu)點(diǎn)是代碼簡(jiǎn)潔，this提前定義，但他的缺點(diǎn)也是這些，比如代碼太過(guò)簡(jiǎn)潔，導(dǎo)致不好閱讀，this提前定義，導(dǎo)致無(wú)法使用js進(jìn)行一些es5里面看起來(lái)非常正常的操作。針對(duì)這些缺點(diǎn)，下面我就總結(jié)一下什么情況下不該使用箭頭函數(shù)。

先來(lái)看下面這段代碼

var obj = {  
    array: [1, 2, 3],
    sum: () => {
        console.log(this === window); // => true
        return this.array.reduce((result, item) => result + item);
    }
};

// Throws "TypeError: Cannot read property "reduce" of undefined"
obj.sum();  

sum方法定義在obj對(duì)象上，當(dāng)調(diào)用的時(shí)候我們發(fā)現(xiàn)拋出了一個(gè)TypeError，因?yàn)楹瘮?shù)中的this是window對(duì)象，所以this.array也就是undefined。原因也很簡(jiǎn)單，相信只要了解過(guò)es6 箭頭函數(shù)的都知道

箭頭函數(shù)沒(méi)有它自己的this值，箭頭函數(shù)內(nèi)的this值繼承自外圍作用域

解決方法也很簡(jiǎn)單，就是不用唄。這里可以用es6里函數(shù)表達(dá)式的簡(jiǎn)潔語(yǔ)法，在這種情況下，this值就取決于函數(shù)的調(diào)用方式了。

var obj = {  
    array: [1, 2, 3],
    sum() {
        console.log(this === obj); // => true
        return this.array.reduce((result, item) => result + item);
    }
};

obj.sum(); // => 6  

通過(guò)object.method()語(yǔ)法調(diào)用的方法使用非箭頭函數(shù)定義，這些函數(shù)需要從調(diào)用者的作用域中獲取一個(gè)有意義的this值。

在對(duì)象原型上定義函數(shù)也是遵循著一樣的規(guī)則

function Person (pName) {
    this.pName = pName;
}

Person.prototype.sayName = () => {
    console.log(this === window); // => true
    return this.pName;
}

var person = new Person("wdg");

person.sayName(); // => undefined

使用function函數(shù)表達(dá)式

function Person (pName) {
    this.pName = pName;
}

Person.prototype.sayName = function () {
    console.log(this === person); // => true
    return this.pName;
}

var person = new Person("wdg");

person.sayName(); // => wdg

所以給對(duì)象原型掛載方法時(shí)，使用function函數(shù)表達(dá)式

this是js中非常強(qiáng)大的特點(diǎn)，他讓函數(shù)可以根據(jù)其調(diào)用方式動(dòng)態(tài)的改變上下文，然后箭頭函數(shù)直接在聲明時(shí)就綁定了this對(duì)象，所以不再是動(dòng)態(tài)的。
在客戶端，在dom元素上綁定事件監(jiān)聽(tīng)函數(shù)是非常普遍的行為，在dom事件被觸發(fā)時(shí)，回調(diào)函數(shù)中的this指向該dom,可當(dāng)我們使用箭頭函數(shù)時(shí):

var button = document.getElementById("myButton");  
button.addEventListener("click", () => {  
    console.log(this === window); // => true
    this.innerHTML = "Clicked button";
});

因?yàn)檫@個(gè)回調(diào)的箭頭函數(shù)是在全局上下文中被定義的，所以他的this是window。所以當(dāng)this是由目標(biāo)對(duì)象決定時(shí)，我們應(yīng)該使用函數(shù)表達(dá)式:

var button = document.getElementById("myButton");  
button.addEventListener("click", function() {  
    console.log(this === button); // => true
    this.innerHTML = "Clicked button";
});

在構(gòu)造函數(shù)中，this指向新創(chuàng)建的對(duì)象實(shí)例

this instanceOf MyFunction === true

需要注意的是，構(gòu)造函數(shù)不能使用箭頭函數(shù)，如果這樣做會(huì)拋出異常

var Person = (name) => {
    this.name = name;
}

// Uncaught TypeError: Person is not a constructor
var person = new Person("wdg");

理論上來(lái)說(shuō)也是不能這么做的，因?yàn)榧^函數(shù)在創(chuàng)建時(shí)this對(duì)象就綁定了，更不會(huì)指向?qū)ο髮?shí)例。

箭頭函數(shù)可以讓語(yǔ)句寫(xiě)的非常的簡(jiǎn)潔，但是一個(gè)真實(shí)的項(xiàng)目，一般由多個(gè)開(kāi)發(fā)者共同協(xié)作完成，就算由單人完成，后期也并不一定是同一個(gè)人維護(hù)，箭頭函數(shù)有時(shí)候并不會(huì)讓人很好的理解，比如

let multiply = (a, b) => b === undefined ? b => a * b : a * b;

let double = multiply(2);

double(3); // => 6

multiply(2, 3); // =>6

這個(gè)函數(shù)的作用就是當(dāng)只有一個(gè)參數(shù)a時(shí)，返回接受一個(gè)參數(shù)b返回a*b的函數(shù)，接收兩個(gè)參數(shù)時(shí)直接返回乘積，這個(gè)函數(shù)可以很好的工作并且看起很簡(jiǎn)潔，但是從第一眼看去并不是很好理解。
為了讓這個(gè)函數(shù)更好的讓人理解，我們可以為這個(gè)箭頭函數(shù)加一對(duì)花括號(hào)，并加上return語(yǔ)句，或者直接使用函數(shù)表達(dá)式:

function multiply(a, b) {
    if (b === undefined) {
        return function (b) {
            return a * b;
        }
    }
    return a * b;
}

let double = multiply(2);

double(3); // => 6
multiply(2, 3)； // => 6

毫無(wú)疑問(wèn)，箭頭函數(shù)帶來(lái)了很多便利。恰當(dāng)?shù)氖褂眉^函數(shù)可以讓我們避免使用早期的.bind()函數(shù)或者需要固定上下文的地方并且讓代碼更加簡(jiǎn)潔。
箭頭函數(shù)也有一些不便利的地方。我們?cè)谛枰獎(jiǎng)討B(tài)上下文的地方不能使用箭頭函數(shù):定義需要?jiǎng)討B(tài)上下文的函數(shù)，構(gòu)造函數(shù)，需要this對(duì)象作為目標(biāo)的回調(diào)函數(shù)以及用箭頭函數(shù)難以理解的語(yǔ)句。在其他情況下，請(qǐng)盡情的使用箭頭函數(shù)。