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

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();

在这种情况下，thisinhandleChange指的是 object myclass。但是如果它保留原始引用，它不应该引用global它的定义时间吗？

标签： javascriptfunction