[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 會通過拋出異常的方式進行隱式地預防
* 太簡短的(難以理解)函數
- 說明
- CSS與HTML
- BFC的特性及其常見應用
- CSS深入理解之margin
- CSS深入理解之line-height
- CSS盒模型相關知識
- CSS知識總結
- HTML知識總結
- 三欄布局五種方式
- JavaScript內置對象
- 1.循環
- 2.數組方法對比
- 3.字符串實用常操紀要
- JavaScript核心
- var、let、const定義變量
- this 的指向問題詳解
- 箭頭函數
- ES6部分知識歸納
- ES6的Class
- Promise和Async/await
- 面向對象的概念及JS中的表現
- 創建對象的九種方式
- JS的繼承
- 閉包總結
- 構造函數與作用域
- 原型與原型鏈
- 函數的四種調用模式
- apply、call、bind詳解
- JavaScript應用
- 1.JavaScript實現深拷貝與淺拷貝
- 2.函數防抖與節流
- 3.無阻塞腳本加載技術
- DOM
- 如何寫出高性能DOM?
- 事件探秘
- 事件委托
- 操作DOM常用API詳解
- 重排和重繪
- 運行機制與V8
- 瀏覽器的線程和進程
- Vue.js
- Vue.js知識點總結
- Vue-Router知識點總結
- 父子組件之間通信的十種方式
- 優化首屏加載
- 關于Vuex
- 前端路由原理及實現
- 在Vue.js編寫更好的v-for循環的6種技巧
- 12個Vue.js開發技巧和竅門
- 網絡協議
- HTTP緩存機制
- UDP協議
- TCP協議
- HTTPS協議
- HTTPS的背景知識、協議的需求、設計的難點
- HTTPS與HTTP的區別
- 框架與架構
- MVC、MVP、MVVM
- Gulp與Webpack的區別
- Angular React 和 Vue的比較
- 虛擬DOM和實際的DOM有何不同?
- 架構問題
- 工程化
- npm link命令
- npm scripts 使用指南
- 前端工程簡史
- 常見的構建工具及其對比
- Webpack基本配置與概念
- 設計模式
- 工廠設計模式
- 單例設計模式
- 適配器模式
- 裝飾器模式