JavaScript对象字面量方法语法疑问：箭头函数与方法定义的this差异

第二种方法定义的语法名称 #

示例2中使用的是ES6对象方法简写语法，这是一种语法糖，等价于传统的hello: function() { ... }写法，但代码更简洁直观。

两种写法的this差异原因 #

• 箭头函数（示例1）没有自身的this绑定，它的this完全继承自定义时的外层词法上下文。你的示例里，proto定义在全局作用域，所以箭头函数内的this指向全局对象，因此拿到的是全局的name变量。
• 对象方法简写（示例2）本质是普通函数，它的this遵循JavaScript常规绑定规则：谁调用该方法，this就指向谁。当joe.hello()执行时，调用者是joe对象，所以this指向joe，自然能读取到joe的name属性。

适用场景 #

对象方法简写（示例2） #

• 需要方法访问调用它的对象实例属性/方法时，比如创建可复用的原型方法、类的实例方法，这种写法能让this正确指向实例。
• 依赖原型链的方法调用场景，比如通过Object.create创建的对象继承原型方法时，确保方法内的this指向实际调用的实例。

箭头函数作为对象属性（示例1） #

• 需要固定this指向，避免其随调用者变化时，比如在类的方法中定义回调函数，用箭头函数可以绑定类实例的this，防止回调执行时this丢失。
• 方法不需要访问调用对象的实例属性，仅需捕获外层作用域的this时。

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