箭头函数与普通函数的区别

• 在普通函数中，this 的值是在运行时确定的，取决于函数是如何被调用的;在箭头函数中，this 的值是在函数定义时确定的，它继承自包含它的最近的非箭头函数父级的 this 值。
• 普通函数有 arguments 对象，它包含了函数被调用时传递给它的参数;箭头函数没有自己的 arguments 对象，但可以使用剩余参数语法（...args）来获取传递给函数的参数。
• 普通函数可以用作构造函数，通过 new 关键字创建实例;箭头函数不能用作构造函数，它没有自己的 this，因此无法被实例化。

箭头函数的this值在函数定义时确定的，而不是在运行时确定的

这里是一个简单的例子来说明这个概念：

javascriptCopy code
function TraditionalFunction() {
  this.value = 1;

  // 在 setTimeout 中使用传统函数，this 指向全局对象
  setTimeout(function() {
    this.value++;
    console.log(this.value); // 输出 NaN，因为 this 不指向 TraditionalFunction 对象
  }, 1000);
}

function ArrowFunction() {
  this.value = 1;

  // 在 setTimeout 中使用箭头函数，this 指向 ArrowFunction 对象
  setTimeout(() => {
    this.value++;
    console.log(this.value); // 输出 2，因为 this 指向 ArrowFunction 对象
  }, 1000);
}

const traditionalObj = new TraditionalFunction(); // 输出 NaN
const arrowObj = new ArrowFunction();           // 输出 2

在这个例子中，TraditionalExample和ArrowExample分别是使用传统函数和箭头函数的两个构造函数。在setTimeout回调函数中，传统函数导致this指向全局对象，而箭头函数捕获了正确的this，指向相应的对象。