首先知道一下什么是箭頭函數，箭頭函數就是沒有`function`關鍵字，而是一個類似箭頭的函數： ```js var a = ()=>{ return 1; } ``` 相當于 [【22】Es6新特性有哪些？](%E3%80%9022%E3%80%91Es6%E6%96%B0%E7%89%B9%E6%80%A7%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F.md) ~~~js function a(){ return 1; } ~~~ 那么就來看一下他們的區別 #### 箭頭函數作為匿名函數,是不能作為構造函數的,不能使用new ~~~js var B = ()=>{ value:1; } var b = new B(); //TypeError: B is not a constructor ~~~ #### 箭頭函數不綁定arguments,取而代之用rest參數…解決 ~~~js function A(a){ console.log(arguments); //[object Arguments] {0: 1} } var B = (b)=>{ console.log(arguments); //ReferenceError: arguments is not defined } var C = (...c)=>{ //...c即為rest參數 console.log(c); //[3] } A(1); B(2); C(3); ~~~ #### 箭頭函數會捕獲其所在上下文的 this 值，作為自己的 this 值 ~~~js var obj = { a: 10, b: function(){ console.log(this.a); //10 }, c: function() { return ()=>{ console.log(this.a); //10 } } } obj.b(); obj.c()(); ~~~ #### 箭頭函數當方法使用的時候沒有定義this綁定 這句話是`MDN`里面寫的，但是我覺得這條和上條其實是一條，還是捕獲所在的上下文，比如下面這個例子：`b`是一個箭頭函數，然后它的 `this`是指向`window`，這是為什么呢，因為箭頭函數捕獲的是`obj{}`這個對象的環境，然后這個環境的`this`指向的是`window`，就相當于上一條的例子：在`c`方法里面`return`的那個箭頭函數捕獲的是`c:function(){}`這個環境的`this`，而這個環境的`this`是`obj`，這樣是不是就清晰明了了 ~~~js var obj = { a: 10, b: () => { console.log(this.a); //undefined console.log(this); //window }, c: function() { console.log(this.a); //10 console.log(this); //obj{...} } } obj.b(); obj.c(); ~~~ #### 使用call()和apply()調用 通過 `call()` 或 `apply()` 方法調用一個函數時，只是傳入了參數而已，對 `this`并沒有什么影響 ~~~js var obj = { a: 10, b: function(n){ var f = (v) => v + this.a; return f(n); }, c: function(n) { var f = (v) => v + this.a; var m = {a:20}; return f.call(m,n); } } console.log(obj.b(1)); //11 console.log(obj.c(1)); //11 ~~~ #### 箭頭函數沒有原型屬性 ~~~js var a = ()=>{ return 1; } function b(){ return 2; } console.log(a.prototype);//undefined console.log(b.prototype);//object{...} ~~~ #### 箭頭函數不能當做Generator函數,不能使用yield關鍵字 #### 箭頭函數不能換行 ~~~js var a = () =>1; //SyntaxError: Unexpected token => ~~~ 對于函數的`this`指向問題，我總結了下面兩句話： 1. 箭頭函數的`this`永遠指向其上下文的 `this`，任何方法都改變不了其指向，如`call(), bind(), apply()` 2. 普通函數的`this`指向調用它的那個對象