函数表达式作为对象方法本质是将函数赋值给对象属性,属“函数表达式+对象属性”组合;基础用匿名函数,es6推荐方法简写,进阶可用具名函数表达式,禁用箭头函数与外部赋值。

函数表达式作为对象方法,本质是把一个函数赋值给对象的某个属性,属于“函数表达式 + 对象属性”的组合用法。它不依赖 function 声明语句,而是通过变量赋值的方式定义函数,并挂载到对象上,灵活性高、适合模块化和动态构造。
基础写法:匿名函数表达式
最常见也最直接的形式,把匿名函数赋给对象的属性:
示例:
const calculator = {<br> add: function(a, b) { return a + b; },<br> multiply: function(x, y) { return x * y; }<br>};<br>console.log(calculator.add(3, 5)); // 8<br>console.log(calculator.multiply(4, 6)); // 24
- 函数没有名字,
add和multiply是对象的属性名,不是函数名 - 调试时调用栈显示为
anonymous,可读性稍弱 - 兼容所有浏览器,包括老旧环境
推荐写法:ES6 方法简写语法
ES6 引入的语法糖,省略 function 关键字和冒号,更简洁现代:
const user = {<br> name: 'Tom',<br> greet() { return `Hello, ${this.name}`; },<br> isAdult(age) { return age >= 18; }<br>};<br>console.log(user.greet()); // "Hello, Tom"<br>console.log(user.isAdult(22)); // true
- 函数名自动取属性名(
greet的name属性值就是"greet") - 支持
this正常绑定,适用于绝大多数对象方法场景 - 当前主流项目中的首选写法,代码更清晰易维护
进阶写法:具名函数表达式
在对象内部显式写出函数名,兼顾调试友好性和递归能力:
const counter = {<br> count: 0,<br> increment: function inc() {<br> this.count++;<br> if (this.count }<br>};<br>counter.increment();<br>console.log(counter.count); // 3
- 函数内部可通过
inc()自调用,避免依赖this.increment - 开发者工具中调用栈显示
inc,便于定位问题 - 函数名仅在函数体内有效,对外不可见,不影响命名空间
注意避坑点
以下写法看似相似,但有关键差异,需特别留意:
-
不要用箭头函数作为对象方法:如
greet: () => console.log(this.name),因箭头函数不绑定this,会丢失对象上下文 -
不能在对象字面量外单独写
function() {}再赋值:必须确保函数表达式完整出现在属性赋值右侧,否则语法报错 -
属性名含特殊字符时需加引号:如
"get-user-info": function() { ... },否则解析失败











