← 返回目录

4. 对象函数简写

这是两条"少打字"的小规矩：属性名和变量名一模一样时，只写一个就行（比如 { name: name } 写成 { name }）；对象里的方法可以省掉 function 和冒号，直接 say() {}。写出来的对象更短、更清爽，也不容易写错。

4.1 互动演示

4.2 知识点讲解

① 属性简写：属性名和变量名相同，只写一个

想象你已经有个变量叫 name，现在要把它塞进对象当属性——以前得写两遍 name: name，现在只写一个 name，JS 自动拿同名变量填进去。

let name = "大喇叭"; // 已经有个变量 name
let age = 24;       // 已经有个变量 age

// 以前：键和值都要写
let obj = { name: name, age: age }; // 键名和值写了两遍
//     ^^^^^^^^  ^^^^
//     名字和值重复了

// 现在：只写一个，JS 自动当成 name: name
let obj = { name, age }; // 只写名字，JS 自动拿同名变量填进去
//    ^^^^ ^^^^
//    等价于 { name: name, age: age }

只有"变量名正好等于属性名"时才能简写。如果你想把变量 myName 塞进对象当属性 name，就不能简写成 { myName }，那样属性名会变成 myName——必须老老实实写 { name: myName }。

② 方法简写：省略 function 和冒号

对象里的函数（方法）以前要写 say: function {}，现在直接 say() {}，把冒号和 function 一起省了。

// 以前：方法要写 名字: function() {}
let obj = {                  // 造个对象
  say: function () {         // 老写法：冒号 + function
    console.log("我会演小品"); // 方法里干的事
  }
};
obj.say();                   // 调用这个方法

// 现在：名字 {} 就完事
let obj = {                  // 再造个对象
  say() { // 省掉了冒号和 function
    console.log("我会演小品"); // 方法里干的事
  }
};
obj.say();                   // 调用一样的

方法简写还有个隐藏好处：简写方法 支持 super，this 绑定也更规范。写 Vue 组件方法、工具类时全是这种写法。

③ 综合示例

let school = "大喇叭";                          // 已有变量
let change = function () { console.log("改变世界"); }; // 已有函数变量

// 以前：满屏重复
let obj = {
  school: school,              // 键值重复
  change: change,              // 键值重复
  say: function () { console.log("言行一致"); } // 老写法方法
};

// 现在：干净利落
let obj = {
  school, // 简写属性
  change, // 简写属性
  say() { console.log("言行一致"); } // 简写方法
};

4.3 实战：用在哪 / 常见坑 / 怎么解决

① 可能在什么地方用：封装接口返回值、构造配置对象、React 里写组件方法、Vue 选项对象里的 methods、函数返回值直接 return 简写对象。

② 常见的问题：以为随便什么都能简写——其实变量名必须等于属性名；把简写方法和箭头函数属性搞混；对象里既有简写又有计算属性名时没搞清楚优先级。

③ 解决思路：不确定就先写全 { name: name } 再删；方法用 名字，需要绑定外层 this 时才用箭头函数属性 say: => {}。