箭头函数(=＞)和普通函数(function)的区别

JavaScript中箭头函数=>和普通函数function的区别—2021前端高频面试题
转载自：作者：阮一峰 ECMAScript6 入门和博客园
一、区别：
1.箭头函数与普通函数写法不同

//箭头函数
//var声明变量时
var fn = (a, b)=>{
   return a+b};
//let声明变量时
let foo = () => {
   console.log('foo');
}

//function 普通函数
//上述var等同于
function fn(a, b) {
   return a+b;
}
//上述let等同于
function foo() {
   console.log('foo');
}

2.This的指向不同（最重要！！！）
使用function定义额函数，this的指向随着调用环境的变化而变化，而箭头函数=>中this的指向是固定不变的：

//使用function定义的函数
function foo() {
   console.log(this);
   }
   var obj = { aa : foo};
   foo(); //window
   obj.aa(); //obj { aa : foo}
//使用箭头函数=>定义的函数
var foo = () => { console.log(this)};
var obj = {aa : foo};
foo(); //window
obj.aa(); //window  (箭头函数的this指向固定不变)

3.变量提升
由于Js的内存机制，function的级别最高，使用箭头函数定义函数时，需要使用var/let/const关键词，而let和const不存在变量提升（var、let和const的区别）
4.箭头函数不可以当做构造函数，不可以使用new命令，否则会报错，如下：

//尝试使用箭头函数定义构造函数
var Person = (name, age) => {
   this.name = name;
   this.age = age;
  };
  var lenhart = new Person('lenhart', 25); //Uncaught TypeError: Person is not a constructor

//使用function方法定义构造函数
var Person = (name, age) => {
   this.name = name;
   this.age = age;
  };
  var lenhart = new Person('lenhart', 25);
  console.log(lenhart); //{name: 'lenhart', age: 25}

4.箭头函数不可以使用arguments对象，该对象在函数体内不存在；如果要用，可以用Rest参数代替。
5.箭头函数不可以使用yield命令，因此箭头函数不能用作Generator函数。