箭頭函數和普通函數的區別，你知道幾個呢？

箭頭函數是ES6新增的寫法，那爲什麼要增加這樣的寫法呢？它與普通函數有哪些區別呢？

區別一：箭頭函數語法更加簡潔

// 普通函數寫法
function fn(x) {
  return function(y) {
    return x + y;
  };
}

// 箭頭函數寫法
let fn = x => y => x + y

箭頭函數相當於匿名函數，並且簡化了函數的定義，像上例代碼所示，只包含一個表達式，所以就可以省略{ }和return，但是如果包含多個表達式，不可以省略{ }和return，如下：

x => {
   if (x = 520) {
       return x;
   } else {
       return x = 520;
   }
}

區別二：箭頭函數沒有自己的this

箭頭函數中出現的this是繼承函數所處上下文的this，使用call和apply等任何方式都無法改變this的指向。

let obj = {
  name: "OBJ",
};
// 普通函數寫法
function fn1() {
  console.log(this); 
}
fn1();   // Window 
fn1.call(obj);   // {name: "OBJ"}

// 箭頭函數寫法
let fn2 = () => {
  console.log(this); 
};
fn2()  // Window 
fn2.call(obj);  // Window

區別三：箭頭函數沒有arguments

箭頭函數中沒有arguments（類數組），但是可以基於...arg獲取傳遞的參數集合（數組）

// 普通函數寫法
function fn() {
    console.log(arguments);   // Arguments(3) [10, 20, 30, callee: ƒ, Symbol(Symbol.iterator): ƒ]       
}
fn(10, 20, 30);

// 箭頭函數寫法
let fn = (...arg) => {
  // console.log(arguments);  // Uncaught ReferenceError: arguments is not defined
  console.log(arg); // [10, 20, 30]
};
fn(10, 20, 30);

區別四：箭頭函數不能被new執行

因爲在箭頭函數中沒有this也沒有prototype

// 普通函數寫法
function Fn() {
  this.x = 100;
}
Fn.prototype.getX = function () {};
let f = new Fn();

// 箭頭函數寫法
let Fn = () => {
  this.x = 200;
};
let f = new Fn(); // Uncaught TypeError: Fn is not a constructor

到這裏，這4個區別大家清楚了嗎，可以自己去實踐一波了。