JS this之普通函数和箭头函数比较

在 JavaScript 中，箭头函数与普通函数在处理 this 关键字时存在一些区别。

1. 作用域绑定： 箭头函数具有词法作用域绑定，这意味着它们的 this 是在定义函数时确定的，而不是在运行时确定的。换句话说，箭头函数的 this 始终与其在外层作用域（即定义函数的地方）中的 this 值相同。

2. 普通函数的this： 在普通函数中，this 的值是在运行时确定的，取决于函数的调用方式。如果函数作为对象的方法调用，this 将引用该对象。如果函数作为全局函数调用，则 this 将引用全局对象（在浏览器中为 window 对象，在 Node.js 中为 global 对象）。此外，您可以使用 call、apply 或 bind 方法显式地指定函数的 this。

下面是一些代码示例，用于说明箭头函数和普通函数在 this 上的区别：

箭头函数示例：

function A() {
  this.value = 42;
  
  // 箭头函数中的this会继承外层作用域中的this
  this.method = () => {
    console.log(this.value);
  }
}

const obj = new A();
obj.method(); // 输出: 42

在上面的示例中，箭头函数 method 定义在构造函数 A 内部，并且在箭头函数中，this 继承了构造函数的 this，因此在调用 obj.method() 时，输出的是构造函数中的 value 值。

普通函数示例：

function B() {
  this.value = 42;
  
  // 普通函数中的this取决于函数的调用方式
  this.method = function() {
    console.log(this.value);
  }
}

const obj2 = new B();
obj2.method(); // 输出: 42

const func = obj2.method;
func(); // 输出: undefined（或报错，取决于严格模式）

在上面的示例中，普通函数 method 在构造函数 B 内部定义。当作为对象的方法调用时（obj2.method()），this 引用该对象，因此输出的是构造函数中的 value 值。但是，当将方法作为普通函数引用并调用时（func()），this 就失去了其原本的上下文，变成了全局对象或者 undefined（在严格模式下）

总结：箭头函数和普通函数在处理 this 时有一些区别。箭头函数具有词法作用域绑定，其 this 始终与定义函数的外层作用域中的 this 相同。而普通函数的 this 的值在运行时确定，并且取决于函数的调用方式。

请注意，这只是 this 行为的一般规则，具体的行为可能在特定的上下文或使用方式中有所差异。