Question

由于箭头函数中的 this 指的是词法上下文，因此预计以下代码会记录对象本身：

const arrow = () => {
  console.log(this);
};
const object = {
  render() {
    setTimeout(arrow, 1000);
  },
};
object.render();

但是它实际上记录了 global 对象。这让我感到困惑，因为当我使用内联箭头函数时，它工作正常并记录 obj:

const object = {
  render() {
    setTimeout(() => {
      console.log(this);
    }, 1000);
  },
};
object.render();

使用同一箭头函数的内联版本，代码会记录对象本身，这正是我想要的。我真的很困惑为什么会发生这种情况。它们都是箭头函数，不是吗？

*更新：感谢您的回答！因此，箭头函数中的 this 在定义时保留引用。但是课堂上的 this 呢？例如，

class MyClass {
    handleChange = () => {
      console.log(this);
    };
    render() {
      setTimeout(this.handleChange, 1000);
    }
  }
  const myclass = new MyClass();
  myclass.render();

在这种情况下，this 中的 handleChange 指的是对象 myclass。但是如果它保持原始引用，它是不是应该在定义时引用global？

使用箭头函数引用与内联箭头函数时 javascript 中的混淆行为

0 个答案: