this 与箭头函数对比器

同一个对象 user，换一种写法，this 的来源就会改变。先选场景，再运行，观察右侧的调用点、落点和日志。

普通函数看调用方式箭头函数看外层作用域

对象 user

name: "小夏"

const user = {
  name: "小夏",
  normalMethod() { return this.name; },
  arrowMethod: () => this.name,
  callbackNormal() {
    setTimeout(function () {
      return this.name;
    });
  },
  callbackArrow() {
    setTimeout(() => this.name);
  }
};

普通方法：调用方式决定 this

来源：调用方式

调用点 user.normalMethod()

点号左边是 user，普通函数执行时把 this 指向 user。

this 落点 this === user

所以 this.name 读到 "小夏"。

结论 普通方法里的 this 来自“谁调用了它”。

读到的 name "小夏"

新手记法 普通函数先找调用点左边。

运行日志

已运行 0 次

0选择一个场景，点击运行，日志会记录这次 this 的实际指向。

当前运行片段

normalMethod

user.normalMethod();