箭頭函數和普通函數的區別

文章轉載至：

鏈接：https://www.jianshu.com/p/73cbeb6782a0
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

 

首先知道一下什麼是箭頭函數，箭頭函數就是沒有function關鍵字，而是一個類似箭頭的函數：

var a = ()=>{
  return 1;
}

相當於

 

function a(){
  return 1;
}

那麼就來看一下他們的區別

箭頭函數作爲匿名函數,是不能作爲構造函數的,不能使用new

 

var B = ()=>{
  value:1;
}

var b = new B(); //TypeError: B is not a constructor

箭頭函數不綁定arguments,取而代之用rest參數…解決

 

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 值

 

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，這樣是不是就清晰明瞭了

 

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並沒有什麼影響

 

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

箭頭函數沒有原型屬性

 

var a = ()=>{
  return 1;
}

function b(){
  return 2;
}

console.log(a.prototype);//undefined
console.log(b.prototype);//object{...}

箭頭函數不能當做Generator函數,不能使用yield關鍵字

箭頭函數不能換行

 

var a = ()
          =>1; //SyntaxError: Unexpected token =>

對於函數的this指向問題，我總結了下面兩句話：

1. 箭頭函數的this永遠指向其上下文的 this，任何方法都改變不了其指向，如call(), bind(), apply()
2. 普通函數的this指向調用它的那個對象