js箭头函数的this

结论

1. 箭头函数没有自己的this
2. 箭头函数的this取决于父级的作用域
3. 箭头函数的this在函数定义的时候就已经确定了，但是普通函数的this是在运行的时候才能确定的，因为要看是谁调用它的；所以箭头函数的this不会受到调用方式的影响，是静态的this
4. 一般来说，箭头函数的this是不会被改变的，注意，用call apply bind等方法也不能修改箭头函数this的指向

具体解释

箭头函数的 this 是在函数定义时确定的，并且是词法上下文（Lexical Context）中的 this 值。

具体来说，箭头函数的 this 值取决于箭头函数所在的父级作用域中 this 的值，而不是箭头函数被调用时的调用者。这意味着无论如何调用箭头函数，其 this 都会保持不变，始终指向定义时所在的作用域的 this。

这与普通函数不同，普通函数的 this 值在运行时才确定，并且取决于函数被调用时的上下文。因此，普通函数的 this 可能会因为调用方式的不同而发生变化，而箭头函数的 this 则不会受调用方式的影响。

总之，箭头函数的 this 是静态的，由它所在的词法作用域决定，这使得箭头函数在访问外部作用域的变量和方法时更加方便和可靠。

非要改变箭头函数的this也有方法

当你使用箭头函数时，它的 this 关键字的指向是在定义时确定的，而不是在运行时确定的，这与普通函数有所不同。箭头函数的 this 会捕获其所在上下文的 this 值，而不是创建自己的 this。这就意味着无法通过 call()、apply() 或 bind() 来改变箭头函数的 this 指向。

如果你需要在箭头函数中改变 this 的指向，你可以使用一些技巧或者在箭头函数外部定义一个变量来保存正确的 this。下面是一些常见的方法：

1. 使用闭包或嵌套函数：在箭头函数外部定义一个变量，然后在箭头函数内部引用这个变量，这样就可以访问正确的 this。

function MyClass() {
  this.value = 42;
  
  // 使用箭头函数
  this.method = () => {
    console.log(this.value);
  };
}

const obj = new MyClass();
const method = obj.method;


method(); // 输出: 42

2. 使用 bind()：虽然箭头函数本身不能使用 bind() 方法改变 this 指向，但是你可以在箭头函数外部定义一个函数，然后使用 bind() 来改变这个函数的 this 指向，然后再传递给箭头函数。

function sayHello() {
  console.log(this.name);
}

const obj = {
  name: 'Alice'
};

// 使用 bind() 将 sayHello 函数的 this 绑定到 obj
const boundFunc = sayHello.bind(obj);

// 使用箭头函数调用绑定后的函数
const arrowFunc = () => {
  boundFunc();
};

arrowFunc(); // 输出: Alice

这些方法可以根据你的需求来选择。要记住的关键是理解箭头函数的特性，以及如何利用其特性来管理 this 指向。