详细介绍箭头函数与普通函数的区别｜ 青训营笔记

箭头函数和普通函数在 JavaScript 中有一些重要的区别，包括语法、作用域和 this 的指向等方面。

1. 语法简洁性：

   • 箭头函数具有更简洁的语法，可以通过省略 function 关键字和使用箭头来定义函数，例如：(参数) => { 函数体 }。
   • 普通函数使用 function 关键字来定义函数，例如：function 函数名(参数) { 函数体 }。

2. 作用域：

   • 箭头函数没有独立的作用域，它们继承了父级作用域。这意味着箭头函数内部的 this、arguments、super 和 new.target 等上下文关键字都来自于外层函数的作用域。
   • 普通函数有自己的独立作用域，内部的 this、arguments、super 和 new.target 等上下文关键字是在运行时根据调用方式确定的。

3. this 的指向：

   • 箭头函数没有自己的 this 绑定，它会继承外层作用域的 this 值。这意味着箭头函数中的 this 始终指向定义函数时的作用域，而不是在运行时根据调用方式决定。
   • 普通函数中的 this 是在运行时根据函数的调用方式决定的，它可以根据函数的上下文动态变化。

 var id = 'GLOBAL';
 var obj = {
   id: 'OBJ',
   a: function(){
     console.log(this.id);
   },
   b: () => {
     console.log(this.id);
   }
 };
 obj.a();    // 'OBJ'
 obj.b();    // 'GLOBAL'
 new obj.a()  // undefined
 new obj.b()  // Uncaught TypeError: obj.b is not a constructor

对象obj的方法b是使用箭头函数定义的，这个函数中的this就永远指向它定义时所处的全局执行环境中的this，即便这个函数是作为对象obj的方法调用，this依旧指向Window对象。需要注意，定义对象的大括号{}是无法形成一个单独的执行环境的，它依旧是处于全局执行环境中。

4. 构造函数：

   • 箭头函数不能用作构造函数，不能使用 new 关键字创建实例对象。
   • 普通函数可以用作构造函数，可以通过 new 关键字创建实例对象。

5. arguments 对象：

   • 箭头函数没有自己的 arguments 对象，但可以访问外层作用域中的 arguments 对象。
   • 普通函数内部可以通过 arguments 对象获取所有传入的参数。

总的来说，箭头函数适用于需要简洁语法和共享父级作用域的场景，而普通函数适用于需要独立作用域、动态 this 绑定和构造函数功能的场景。根据具体需求和使用场景选择合适的函数类型。