[toc] ## 1. 箭頭函數和普通函數的區別 ### 1.1 this指向的不同 普通函數的this不是在定義時決定，取決于調用的對象以及環境。不像其他形式的函數，箭頭函數并沒有他們自己的執行上下文。實際上，這就意味著代碼中的this和arguments都是繼承自他們的父函數。 **箭頭函數的this在定義時就已決定，指向被定義環境的執行上下文this**。 * 箭頭函數的this指向定義時所在的外層第一個普通函數，跟使用位置沒有關系 * 被繼承的普通函數的this指向改變，箭頭函數的this指向會跟著改變 **不能直接修改箭頭函數的this指向**，我們可以通過間接的形式來修改箭頭函數的指向：去修改被繼承的普通函數的this指向，然后箭頭函數的this指向也會跟著改變。 **箭頭函數外層沒有普通函數，嚴格模式和非嚴格模式下它的this都會指向window(全局對象)** ### 1.2 不綁定 arguments 參數 普通函數綁定了`arguments`，可以直通過`arguments`獲取所有傳遞參數，箭頭函數本身不綁定`arguments`，取而代之使用 `...rest` 參數解決，但如果箭頭函數的 `this`如果指向普通函數,它的 `argumens` 繼承于該普通函數。 ### 1.3 不可以作為構造函數 普通函數可以作為構造函數，使用`new`關鍵字，而**箭頭函數是匿名函數，不能作為構造函數使用`new`關鍵字**。 無論箭頭函數的 `this` 指向哪里，使用 `new` 調用箭頭函數都會報錯，因為箭頭函數沒有 `constructor`。 ```javascript let a = () => {}; let b = new a(); // a is not a constructor ``` **箭頭函數不支持 `new.target`**，`new.target`是ES6新引入的屬性，普通函數如果通過`new`調用，`new.target`會返回該函數的引用，此屬性主要：用于確定構造函數是否為`new`調用的。 ### 1.4 沒有原型屬性 普通函數有原型`prototype`屬性，箭頭函數沒有原型屬性 ``` let a = () =>{}; console.log(a.prototype); // undefined ``` ### 1.5 箭頭函數不能變量提升 普通函數可以變量提升，箭頭函數不能變量提升，必須在定義之后調用 ### 1.6 箭頭函數的注意事項 一條語句返回對象字面量，需要加括號，或者直接寫成多條語句的`return`形式，否則像func中演示的一樣，花括號會被解析為多條語句的花括號，不能正確解析 ``` var func1 = () => { foo: 1 }; // 想返回一個對象,花括號被當成多條語句來解析，執行后返回undefined var func2 = () => ({foo: 1}); // 用圓括號是正確的寫法 var func2 = () => { return { foo: 1 // 更推薦直接當成多條語句的形式來寫，可讀性高 }; }; ``` 箭頭函數在參數和箭頭之間不能換行！ ``` var func = () => 1; // 報錯： Unexpected token => ``` 箭頭函數的解析順序相對靠前，雖然箭頭函數中的箭頭不是運算符，但箭頭函數具有與常規函數不同的特殊運算符優先級解析規則，解析順序相對 `||` 靠前。 ## 2. 箭頭函數不適用場景 這里有許多箭頭函數不推薦的場景，這種情況之下不僅沒有幫助，而且還會造成不必要的麻煩。 * 在對象上定義函數 * 在原型上定義函數 * 動態上下文中的回調函數 * 箭頭函數不能作為構造器。 JavaScript 會通過拋出異常的方式進行隱式地預防 * 太簡短的（難以理解）函數