详解JS对象方法：传统、简写与箭头函数

在日常 JavaScript 开发中，在对象字面量里定义方法时，常会遇到三种常见写法：c() {}、c: function() {}、c: () => {}。它们看似相近，但在 this 绑定行为上存在显著差异。下面详细拆解这些写法的本质区别与使用场景。

方法简写语法解析

在 JavaScript 对象字面量中，c(){} 是合法且常用的方法定义简写语法，等价于 c: function(){}，二者均正确；但箭头函数 c: () => {} 因不绑定 this，需谨慎使用。

ES6 引入的方法简写语法（Method Shorthand），使对象方法定义更为简洁——直接写 key() { ... }，省略 function 关键字和冒号。这种写法不仅令代码更清爽，还保留了标准方法对 this 的动态绑定特性。以下例子直观展示三种写法的关键区别：

const object = {
  a: 'Ultimate Question of Life, the Universe, and Everything.',
  b: 42,

  //  传统语法：显式 function 表达式
  c: function() {
    return this.b; // this 指向 object
  },

  //  简写语法（推荐）：更简洁，语义相同
  d() {
    return this.b; // this 同样指向 object
  },

  //  箭头函数：无独立 this，无法访问 object 上的属性
  e: () => {
    return this.b; // this 不指向 object，而是外层作用域（如全局或模块级）
  }
};

console.log(object.c()); // 42
console.log(object.d()); // 42
console.log(object.e()); // undefined（若全局无 b）或意外值

三种写法的实际区别

关键区别在于：c: function(){} 和 c(){} 都是普通函数方法，调用时 this 自动绑定到当前对象（即 object），并且支持原型继承、call/apply/bind 等操作。而 c: () => {} 是箭头函数，它不绑定自己的 this，而是继承外层词法作用域的 this。因此，在对象方法中几乎从不适用——除非你明确需要捕获定义时的 this（比如事件回调中固定上下文），但通常更推荐用闭包或 .bind() 来处理。

如何选择合适的方法定义

• 优先使用简写语法 method() { ... } 定义对象方法，语义清晰、书写高效；
• 避免在对象字面量中直接使用箭头函数作为方法（除非有特殊设计意图）；
• 若需在方法中访问对象自身属性，请始终依赖 this，并确保调用方式为 obj.method()（而不是解构后调用，比如 const { method } = obj; method()，这会丢失 this 绑定）。

掌握这三种语法的本质差异，是写出健壮、可维护 JavaScript 对象逻辑的重要基础。下次写对象方法时，不妨多想想——你是真的需要箭头函数，还是只是图省事？