箭頭函式是匿名函式，不能作為建構函式，不能使用new

概念
ES6允許使用箭頭（=>）定義函式，箭頭函式提供了一種更加簡潔的函式書寫方式，箭頭函式多用於匿名函式的定義；

箭頭函式的注意點：
如果形參只有一個，則小括號可以省略；

函式體如果只有一條語句，則花括號可以省略，並省略return，函式的返回值為該條語句的執行結果；

箭頭函式 this 指向宣告時所在作用域下 this 的值；

箭頭函式不能作為建構函式例項化；

不能使用 arguments；

特性
箭頭函式的this是靜態的，始終指向函式宣告時所在作用域下的this的值；
不能作為構造例項化物件；
不能使用 arguments 變數；
箭頭函式的寫法

const multiply = num => num * num;
它等價於：

const multiply = function (num) {
return num * num;
};
此外，還可以傳多個引數，以及可變引數。

// 多引數
const multiply = (num1, num2) => num1 * num2;

// 可變引數
const sum = (num1, num2, ...rest) => {
let result = num1 + num2;
for (let i = 0; i < rest.length; i++) {
result += rest[i];
}

return result;
};
當有多條語句時，需要配上 {...} 和 return。

另外，如果返回的結果是物件，則需要配上 ()，像下面這樣：

const func = val => ({ value: val });
從上述的寫法來看，相較普通函式而言，箭頭函式的確簡便了很多，提升了我們程式碼的易用性。但它並非在任何場景下都適用，接下來，將會介紹幾種不適合箭頭函式的場景，並會提出可行的解決方案。

不適合的場景
1、物件的方法
看下面這個例子：

const obj = {
x: 1,
print: () => {
console.log(this === window); // => true
console.log(this.x); // undefined
}
};

obj.print();
this.x 打印出來是 undefined。為什麼？然後，我在上面加了一行，發現 this 指向了 window。

解析：print 方法用了箭頭函式，其內部的 this 指向的還是上下文 window，上下文中並沒有定義 x，所以 this.x 輸出為 undefined。

解決辦法：用 ES6 的短語法，或者傳統的函式表示式都可以。所以，print 要這樣寫：

print () {
console.log(this === test); // => true
console.log(this.x); // 1
}
2、原型方法
同樣的規則也適用於原型方法的定義，使用箭頭函式會導致執行時的執行上下文錯誤。

function Cat (name) {
this.name = name;
}

Cat.prototype.sayCatName = () => {
console.log(this === window); // => true
return this.name;
};

const cat = new Cat('Miao');
cat.sayCatName(); // => undefined
解決辦法是：用回傳統的函式表示式，像下面這樣：

Cat.prototype.sayCatName = function () {
console.log(this === cat); // => true
return this.name;
};
sayCatName 變回傳統的函式表示式之後，被呼叫時的執行上下文就會指向新建立的 cat 例項。

3、事件的回撥
看下面這個例子：

const btn = document.getElementById('myButton');
btn.addEventListener('click', () => {
console.log(this === window); // => true
this.innerHTML = 'Clicked button';
});
這裡會有問題，因為 this 指向了 window。

解析：當為一個 DOM 事件繫結回撥函式後，觸發回撥函式時的 this，需要指向當前發生事件的 DOM 節點，也就是這裡的 btn。當回調發生時，瀏覽器會用 btn 的上下文去呼叫處理函式。所以最後的 this.innerHTML 等價於 window.innerHTML，問題就在這裡。

解決辦法：用函式表示式代替箭頭函式。像這樣：

btn.addEventListener('click', function() {
console.log(this === btn); // => true
this.innerHTML = 'Clicked button';
});
另外，在 react 中的事件回撥，也經常會遇到類似的問題。

// jsx render
<Button onClick={this.handleClickButton.bind(this)}>
...
</Button>

// callback
handleClickButton () {
...
}
注意：這裡 onClick 的回撥函式，並非字串，而是一個實實在在的函式。可以將 onClick 理解為一箇中間變數，所以 react 在處理函式時的 this 指向就會丟失。

為了解決這個問題，我們需要為回撥函式繫結 this，使得事件處理函式無論如何傳遞，this 都指向我們例項化的那個物件。

在這裡，如果用箭頭函式，可以這樣改寫：

<Button onClick={ event => this.handleClickButton(event) }>
...
</Button>
箭頭函式並沒有自己的 this，所以事件處理函式的呼叫者並不受影響。

4、建構函式
箭頭函式不能通過 new 關鍵字呼叫。

const Message = (text) => {
this.text = text;
};

var helloMessage = new Message('Hello World!');
// Uncaught TypeError: Message is not a constructor
解析：從報錯資訊可以看出，箭頭函式沒有 constructor 方法，所以不能用作建構函式。 JavaScript 會通過丟擲異常的方式，進行隱式地預防。

解決方法：用函式表示式代替箭頭函式。

總結
回顧 MDN 給出的解釋：箭頭函式表示式的語法比函式表示式更短，並且沒有自己的this，arguments，super或 new.target。這些函式表示式更適用於那些本來需要匿名函式的地方，並且它們不能用作建構函式。

所以說，箭頭函式無疑是 ES6 帶來的重大改進，在正確的場合使用箭頭函式，能讓程式碼變得更加簡潔短小。但箭頭函式也不是萬能的，不能用的時候，千萬別硬往上套。比如，在需要動態上下文的場景中，使用箭頭函式需要格外地小心，這些場景包括：物件的方法、原型方法、事件的回撥、建構函式。並非一定要用箭頭函式，才能解決問題。

箭頭函式適合與 this 無關的回撥. 定時器, 陣列的方法回撥
箭頭函式不適合與 this 有關的回撥. 事件回撥, 物件的方法