4. 对象函数简写

对象简写就是属性名和变量名一样就不用写两遍，方法也能省掉 function。

核心两种：
① 属性简写——let obj = {name} 等价于 {name: name}
② 方法简写——{ fn() {} } 等价于 { fn: function() {} }

坑：简写只在变量名和属性名相同时用、计算属性名用 [表达式]、简写不能用箭头函数。

4.1 互动演示

4.2 知识点讲解

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

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

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

// 已经有个变量 age
let age = 24;

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

// ^^^^^^^^ ^^^^
// 名字和值重复了

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

// ^^^^ ^^^^
// 等价于 { name: name, age: age }

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

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

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

// 以前：方法要写 名字: function() {}
// 造个对象
let obj = {

// 老写法：冒号 + function
  say: function () {

// 方法里干的事
    console.log("我会演小品");
  }
};

// 调用这个方法
obj.say();

// 现在：名字 {} 就完事
// 再造个对象
let obj = {

// 省掉了冒号和 function
  say() {

// 方法里干的事
    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: => {}。

本页重点