ES6使用箭頭函式注意點

新事物也是有兩面性的，箭頭函式有他的便捷有他的優點，但是他也有缺點，他的優點是**簡潔，this提前定義，但他的缺點也是這些，比如**太過簡潔，導致不好閱讀，this提前定義，導致無法使用js進行一些es5裡面看起來非常正常的操作。

本質來說箭頭函式沒有自己的this，它的this是派生而來的，根據「詞法作用域」派生而來。

由於箭頭函式在呼叫時不會生成自身作用域下的this和arguments值，其持有外部包含它的函式的this值，並且在呼叫的時候就定下來了，不可動態改變，下面我就總結一下什麼情況下不該使用箭頭函式。

const test = 
};test.sum();
// typeerror: cannot read property 'reduce' of undefined

原因就是，箭頭函式沒有它自己的this值，箭頭函式內的this值繼承自外圍作用域。

物件方法內的this指向呼叫這個方法的物件，如果使用箭頭函式，this和物件方法在呼叫的時候所處環境的this值一致。因為test.sum()是在全域性環境下進行呼叫，此時this指向全域性。

解決方法也很簡單，使用函式表示式或者方法簡寫（es6 中已經支援）來定義方法，這樣能確保 this 是在執行時是由包含它的上下文決定的。

const test = 
};test.sum();
// 6

在物件原型上定義函式也是遵循著一樣的規則

function person(name) 
person.prototype.sayname = () => ;
const cat = new person('mew');
cat.sayname(); // => undefined

使用傳統的函式表示式就能解決問題

function person(name) 
person.prototype.sayname = function() ;
const cat = new person('mew');
cat.sayname(); // => mew

this是js中非常強大的特點，他讓函式可以根據其呼叫方式動態的改變上下文，然後箭頭函式直接在宣告時就繫結了this物件，所以不再是動態的。

在客戶端，在dom元素上繫結事件監聽函式是非常普遍的行為，在dom事件被觸發時，**函式中的this指向該dom，但是，箭頭函式在宣告的時候就繫結了執行上下文，要動態改變上下文是不可能的，在需要動態上下文的時候它的弊端就凸顯出來:

const button = document.getelementbyid('mybutton');
button.addeventlistener('click', () => );

因為這個**的箭頭函式是在全域性上下文中被定義的，所以他的this是window。換句話說就是，箭頭函式預定義的上下文是不能被修改的，這樣this.innerhtml就等價於window.innerhtml，而後者是沒有任何意義的。

使用函式表示式就可以在執行時動態的改變this：

const button = document.getelementbyid('mybutton');
button.addeventlistener('click', function() );

如果使用箭頭函式會報錯。

顯然，箭頭函式是不能用來做建構函式。

const message = (text) => ;
const hellomessage = new message('hello world!');
// throws "typeerror: message is not a constructor"

理論上來說也是不能這麼做的，因為箭頭函式在建立時this物件就繫結了，更不會指向物件例項。

箭頭函式可以讓語句寫的非常的簡潔，但是乙個真實的專案，一般由多個開發者共同協作完成，箭頭函式有時候並不會讓人很好的理解：

const multiply = (a, b) => b === undefined ? b => a * b : a * b;
const double = multiply(2);
double(3); // => 6
multiply(2, 3); // => 6

**看起來很簡短，但大多數人第一眼看上去可能無法立即搞清楚它幹了什麼。

這個函式的作用就是當只有乙個引數a時，返回接受乙個引數b返回a*b的函式，接收兩個引數時直接返回乘積。

為了讓這個函式更好的讓人理解，我們可以為這個箭頭函式加一對花括號，並加上return語句，或者直接使用函式表示式：

function multiply(a, b) 
}return a * b;
}const double = multiply(2);
double(3); // => 6
multiply(2, 3); // => 6

毫無疑問，箭頭函式帶來了很多便利。恰當的使用箭頭函式可以讓我們避免使用早期的.bind()函式或者需要固定上下文的地方並且讓**更加簡潔。

箭頭函式也有一些不便利的地方。我們在需要動態上下文的地方不能使用箭頭函式：定義物件方法、定義原型方法、定義建構函式、定義事件**函式。在其他情況下，請盡情的使用箭頭函式。