箭頭函數和普通函數的主要區別是什麼？

箭頭函數和普通函數的主要區別:

• this的指向問題，箭頭函數是不存在this的（也是箭頭函數和普通函數最主要的區別）
• 箭頭函數沒有原型prototype
• 箭頭函數沒有argements(類數組)

1、this的指向問題（也是箭頭函數和普通函數最主要的區別）

（1）箭頭函數是不存在this的，它的this是繼承自父執行的上下文中，並且不能使用call、apply、bind來改變this的指向，箭頭函數中的this是永遠不會改變的。

好比這裏的箭頭函數的this.x，箭頭函數和say平級以key:value的形式，也就是箭頭函數自己所在的對象爲obj，而obj的父執行上下文就是window，因此這裏的this.x實際上表示的是window.x，所以輸出11.

var x = 11;
var obj = {
  x:22,
  say:()=>{
    console.log(this.x);
  }
}
obj.say();//11
複製代碼

（2） 普通函數this指向的是它的直接調用者。

// 普通函數
var name = "ice";
var obj = {
  name: "leaf",
  getName: function() {
    console.log(this.name);//this指的是它的直角調用者，就是obj,因此返回leaf
  }
};
obj.getName(); // 此時指向調用者obj,輸出leaf

//箭頭函數
var name = "ice";
var obj = {
  name: "leaf",
  getName: () => {
    console.log(this.name); 
    // 指向定義時所在的對象，name是在全局的環境下建立的，全部this指向的是全局對象
}
};

obj.getName();//ice

var obj1 = { name: "haha" };
obj.getName.call(obj1); // 沒法改變this指向 輸出仍是ice
複製代碼

2、箭頭函數沒有原型prototype，是不可以被做爲構造函數調用的，會報錯；

//普通函數
function Person() {
  console.log("person");
}//定義一個構造函數

const myFather = new Person();//構造函數的實例化對象

//箭頭函數
let Person2 = () => {
  console.log("person2");
}
console.log(Person2.prototype);//undefined
const myFather2 = new Person2();////Person2 is not a constructor
複製代碼

3、箭頭函數沒有argements(類數組)，只能基於...arg來獲取參數集合（數組）

let Person2 = () => {
  console.log(person2.argements);
}
Person2(10,20,30)// Person3 is not defined

//只能使用...arg來獲取參數集合（數組）
let Person2 = (...arg) => {
  console.log(arg);
}
Person2(10, 20, 30)// [10, 20, 30]
複製代碼

持續補充更新，記錄很差的地方望指出修改，共同進步~