箭头函数和普通函数的主要区别是什么？

箭头函数和普通函数的主要区别:

• 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]
复制代码

持续补充更新，记录很差的地方望指出修改，共同进步~