摘要：我們在需要動態(tài)上下文的地方不能使用箭頭函數(shù)定義需要動態(tài)上下文的函數(shù)，構(gòu)造函數(shù)，需要對象作為目標的回調(diào)函數(shù)以及用箭頭函數(shù)難以理解的語句。

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

先來看下面這段代碼

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對象上，當調(diào)用的時候我們發(fā)現(xiàn)拋出了一個TypeError，因為函數(shù)中的this是window對象，所以this.array也就是undefined。原因也很簡單，相信只要了解過es6 箭頭函數(shù)的都知道

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

解決方法也很簡單，就是不用唄。這里可以用es6里函數(shù)表達式的簡潔語法，在這種情況下，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  

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

在對象原型上定義函數(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ù)表達式

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

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

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

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

因為這個回調(diào)的箭頭函數(shù)是在全局上下文中被定義的，所以他的this是window。所以當this是由目標對象決定時，我們應(yīng)該使用函數(shù)表達式:

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

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

this instanceOf MyFunction === true

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

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

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

理論上來說也是不能這么做的，因為箭頭函數(shù)在創(chuàng)建時this對象就綁定了，更不會指向?qū)ο髮嵗?/p> 5.太簡短的（難以理解）函數(shù)

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

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

let double = multiply(2);

double(3); // => 6

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

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

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

毫無疑問，箭頭函數(shù)帶來了很多便利。恰當?shù)氖褂眉^函數(shù)可以讓我們避免使用早期的.bind()函數(shù)或者需要固定上下文的地方并且讓代碼更加簡潔。
箭頭函數(shù)也有一些不便利的地方。我們在需要動態(tài)上下文的地方不能使用箭頭函數(shù):定義需要動態(tài)上下文的函數(shù)，構(gòu)造函數(shù)，需要this對象作為目標的回調(diào)函數(shù)以及用箭頭函數(shù)難以理解的語句。在其他情況下，請盡情的使用箭頭函數(shù)。