JS的箭头函数和普通函数的区别

JS箭头函数和普通函数的区别

首先看一下两种函数的书写形式：

箭头函数：()=>{}
普通函数:function xxx(){} 

从书写形式上来看，箭头函数语法是比较简洁的，下面展开论述一下它俩的区别：

1. 箭头函数不会创建自己的this，它没有自己的this，它只会从自己的作用域链的上一层继承this。并且是定义时的this，而不是调用时，也就是说箭头函数的this是定义时已经确定好了的，；而普通函数的this是在调用时动态绑定的。
2. 箭头函数继承来的this指向永远不会变！！！它的指向永远是它定义的时所处的全局执行环境中的this，跟之后谁调用的无关，而且无法通过call/bind/apply来更改它的this指向（本来就没有自己的this）
3. 箭头函数不能作为构造函数使用，下面先了解一下构造函数的new关键字都做了什么：
   它会执行以下一系列步骤：
   ①创建一个新的空对象：
   new 关键字会创建一个新的空对象，这个对象会成为最终的实例。
   ②将新对象的原型链接到构造函数的原型对象：
   新创建的对象会通过原型链与构造函数的原型对象链接起来，这样新对象就可以继承构造函数原型上的方法和属性。
   ③将构造函数的 this 绑定到新对象：
   构造函数内部的 this 会被绑定到新创建的对象，这样构造函数内部的操作就可以作用在新对象上。
   ④执行构造函数的代码块：
   构造函数内部的代码会被执行，可以在其中设置新对象的属性和方法。
   ⑤返回新对象：
   如果构造函数没有显式返回其他对象，则默认返回新创建的对象实例。如果构造函数显式返回了一个对象，那么最终返回的就是这个对象。
   通过上述了解，可以知道箭头函数没有自己的this，所以无法完成上述步骤，因此不能作为构造函数。
4. 箭头函数没有自己的arguments对象，而是继承了外围（包含箭头函数的函数）函数的 arguments 对象

function regularFunction() {
    console.log(arguments); // 输出调用 regularFunction 时的参数列表
  }
  const arrowFunction = () => {
    console.log(arguments); // 此处会产生错误，因为箭头函数没有自己的 arguments 对象
  };
  regularFunction(1, 2, 3);
  arrowFunction(4, 5, 6); // 报错：Uncaught ReferenceError: arguments is not defined

5. 箭头函数没有原型prototype，打印会是undefined
   
6. 箭头函数不能用作Generator函数，不能使用yeild关键字