箭头函数和普通函数区别

特性方面，箭头函数和普通函数存在诸多不同。

一、this 绑定
箭头函数：不会创建自身的 this，而是从定义位置的上下文中继承 this 值，即遵循词法作用域，其 this 指向外层最近的非箭头函数的 this。
普通函数：在调用时动态决定 this 的指向，取决于调用方式，如直接调用时指向全局对象，作为对象方法调用时指向该对象，作为构造函数调用时指向新实例。
示例：

const obj = {
  value: 10,
  arrowFunc: () => console.log(this.value), // 在非严格模式下为 undefined
  regularFunc() {
    console.log(this.value); // 10
  }
};
obj.arrowFunc(); // undefined
obj.regularFunc(); // 10

在上述示例中，箭头函数中的 this.value 未被定义，因为箭头函数继承的是外部环境的 this，而非 obj 本身。
二、使用 new 调用
箭头函数：不能作为构造函数使用，若使用 new 调用会抛出错误。
普通函数：可以作为构造函数使用，在实例化新对象时，this 指向该新实例。
示例：

const ArrowFunc = () => {};
function RegularFunc() {}
new RegularFunc(); // 正常执行
new ArrowFunc(); // 报错：ArrowFunc is not a constructor

三、arguments 对象的处理
箭头函数：没有 arguments 对象，需使用 rest 参数（...args）来获取参数数组。
普通函数：内部有自己的 arguments 对象，可通过它访问传入的所有参数。
示例：

function regularFunc() {
  console.log(arguments); // [1, 2, 3]
}
const arrowFunc = (...args) => {
  console.log(args); // [1, 2, 3]
};
regularFunc(1, 2, 3);
arrowFunc(1, 2, 3);

四、隐式返回
箭头函数：对于单行表达式可以省略大括号和 return 关键字，直接返回结果，简化了写法。
普通函数：必须显式地使用 return 关键字返回结果。
示例：

const add = (a, b) => a + b; // 隐式返回
function addRegular(a, b) {
  return a + b; // 必须使用 return
}

五、作为对象方法使用
箭头函数：不适合直接作为对象方法，因为它没有自己的 this，this 会指向定义位置的外部上下文，而非调用它的对象。
普通函数：更适合作为对象方法，其 this 会指向调用者，即该对象。
示例：

const obj = {
  value: 42,
  arrowFunc: () => console.log(this.value), // `this` 绑定到外部作用域
  regularFunc() {
    console.log(this.value); // `this` 绑定到 obj
  }
};
obj.arrowFunc(); // undefined
obj.regularFunc(); // 42

六、性能
箭头函数：在特定情况下会略微节省内存，尤其是在较少嵌套的环境中，因为无需管理 this 和 arguments。但这种差异在绝大多数情况下微乎其微。
普通函数：在某些优化场景下性能可能更好，尤其是在函数调用频繁且需要频繁重新绑定 this 的情况下。
七、绑定上下文
箭头函数：无法通过 bind ()、call () 或 apply () 改变 this 的指向，其 this 永远指向定义时的上下文。
普通函数：可以使用 bind ()、call ()、apply () 显式改变 this 指向，动态绑定不同的上下文。
总的来说，箭头函数适用于简短且无特定 this 需求的函数场景，而普通函数更适合需要灵活 this 指向和复杂逻辑的情况。