JavaScript箭头函数引用与内联写法的行为差异及类场景疑问

嘿，这个问题刚好踩中了箭头函数this绑定的最关键规则——箭头函数根本没有自己的this，它的this完全由定义时所处的词法作用域决定，一旦确定就再也不会改变。咱们逐个拆解你的例子：

1. 全局定义的箭头函数：this固定指向全局 #

先看第一个让你困惑的例子：

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

这里的arrow箭头函数是直接在全局作用域下定义的，它的词法上下文就是全局环境。不管你之后把它放到哪里调用（比如render方法里传给setTimeout），箭头函数的this都不会变——永远绑定定义时的全局对象（浏览器里是window，Node.js里是global）。

哪怕你在object.render()里调用它，箭头函数也不会继承render方法的this（也就是object），因为箭头函数的this和调用位置完全无关，只认定义时的“老家”。

2. 内联箭头函数：继承上层函数的this #

再看第二个正常工作的例子：

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

这里的箭头函数是定义在render方法内部的，它的词法作用域就是render函数的作用域。当你调用object.render()时，render方法的this指向object，箭头函数就会继承这个this，所以最终输出的是object本身。

简单说：箭头函数会“抓”住定义时上层作用域里的this，之后不管怎么调用，这个this都不会变。

3. 类字段中的箭头函数：绑定到实例本身 #

最后是你补充的类场景：

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

这里的写法是ES6的类字段语法，和原型方法不一样：handleChange = () => {}并不是定义在MyClass的原型上，而是在实例的构造过程中创建的箭头函数。

当你new MyClass()时，构造函数会为每个实例单独创建这个箭头函数，此时的词法上下文里的this就是当前正在创建的实例（也就是myclass）。所以这个箭头函数的this就永久绑定到了这个实例上，哪怕你把它作为回调传给setTimeout，它的this依然指向myclass，不会变成全局。

总结一下关键规则 #

• 箭头函数没有独立的this，它的this是定义时上层作用域的this，终身不变。
• 普通函数的this是调用时确定的，而箭头函数刚好相反——调用位置对它的this没有任何影响。
• 类字段里的箭头函数本质是实例属性，定义时的this就是实例本身，所以会牢牢绑定实例。

内容的提问来源于stack exchange，提问作者BinaryDog