JS 方法简写：对象方法定义的简洁写法 - 智猿学院-IT界的百科全书

各位观众老爷，大家好！今天咱们聊聊 JavaScript 里一个能让你代码看起来更清爽、更优雅的小技巧：对象方法定义的简写。这玩意儿就像你衣柜里的一件百搭单品，用好了能让你的代码瞬间提升一个level。

开场白：为啥要搞简写？

咱先说说为什么要用简写。写代码嘛，最重要的是效率和可读性。如果能用更少的代码表达同样的意思，何乐而不为呢？想想看，你每天都要写大量的对象，每个对象里可能都包含好几个方法。如果每个方法都用冗长的老式写法，那代码看起来就跟裹脚布一样，又臭又长。

简写，就是为了让你的代码更简洁、更易读，同时也减少你的键盘磨损（毕竟程序员也是需要关爱的）。

正餐：对象方法定义的传统写法

在进入简写模式之前，咱们先回顾一下传统的对象方法定义方式。这是基础，就像盖房子要先打地基一样。

const myObject = {
  name: "张三",
  age: 30,
  sayHello: function() {
    console.log("你好，我是" + this.name);
  },
  increaseAge: function(years) {
    this.age += years;
    console.log("现在我" + this.age + "岁了");
  }
};

myObject.sayHello(); // 输出: 你好，我是张三
myObject.increaseAge(5); // 输出: 现在我35岁了

这段代码里，myObject 是一个对象，它有两个属性 name 和 age，还有两个方法 sayHello 和 increaseAge。注意看方法的定义方式：方法名: function() { ... }。

这种写法没毛病，能跑，但就是有点啰嗦，尤其是那个 function 关键字，感觉像个累赘。

高潮：对象方法定义的简写模式

现在，主角登场了！对象方法定义的简写模式，能让你摆脱 function 关键字的束缚，让代码更简洁。

const myObject = {
  name: "李四",
  age: 25,
  sayHello() {
    console.log("你好，我是" + this.name);
  },
  increaseAge(years) {
    this.age += years;
    console.log("现在我" + this.age + "岁了");
  }
};

myObject.sayHello(); // 输出: 你好，我是李四
myObject.increaseAge(3); // 输出: 现在我28岁了

看到了吗？sayHello: function() { ... } 变成了 sayHello() { ... }，increaseAge: function(years) { ... } 变成了 increaseAge(years) { ... }。是不是瞬间感觉清爽多了？

原理剖析：简写背后的故事

其实，这种简写方式是 ES6 (ECMAScript 2015) 引入的。它本质上是一种语法糖，编译器会自动帮你把简写形式转换成传统的形式。所以，不用担心兼容性问题，只要你的 JavaScript 引擎支持 ES6，就可以放心使用。

适用场景：哪些地方可以用简写？

基本上，任何你需要定义对象方法的地方都可以使用简写。比如：

字面量对象: 就像上面例子里的 myObject。
类的方法: 在 ES6 的类定义中，也可以使用简写。
模块导出: 当你需要导出一个包含方法的对象时，简写也能派上用场。

代码示例：类的方法简写

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log("我是" + this.name + ", 今年" + this.age + "岁了");
  }

  increaseAge(years) {
    this.age += years;
    console.log("我 " + this.age + " 岁了");
  }
}

const person = new Person("王五", 28);
person.sayHello(); // 输出: 我是王五, 今年28岁了
person.increaseAge(2); // 输出: 我 30 岁了

在这个例子里，sayHello 和 increaseAge 方法都使用了简写形式。

代码示例：模块导出简写

// module.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

export default {
  add,
  subtract
};

// main.js
import calculator from './module.js';

console.log(calculator.add(5, 3)); // 输出: 8
console.log(calculator.subtract(10, 4)); // 输出: 6

虽然这个例子主要展示了模块导出，但你可以想象一下，如果 add 和 subtract 是更复杂的方法，简写就能发挥更大的作用。

注意事项：简写虽好，不要滥用

虽然简写很方便，但也不是所有场景都适用。有时候，为了代码的可读性，还是应该使用传统的写法。比如：

复杂的函数表达式: 如果你的方法体非常复杂，包含大量的逻辑，那么使用传统的写法可能更清晰。
需要明确 this 指向: 在某些特殊情况下，this 的指向可能会出现问题，这时候使用传统的写法可以更好地控制 this 的指向。 (箭头函数会绑定 this，所以对于方法来说，使用简写定义方法，一般不推荐使用箭头函数)

与其他简写方式的对比

JavaScript 里有很多简写方式，比如对象属性的简写、箭头函数等等。对象方法定义的简写只是其中一种，它们各有各的用途。

简写方式	传统写法	简写形式	适用场景
对象属性简写	`const name = name; const age = age;`	`const { name, age } = { name, age };`	当变量名和属性名相同时，可以使用简写。
对象方法简写	`sayHello: function() { ... }`	`sayHello() { ... }`	定义对象方法时，可以省略 `function` 关键字。
箭头函数	`function(x) { return x * 2; }`	`x => x * 2`	简化函数表达式，特别是单行 `return` 语句的函数。
三元运算符	`if (condition) { result = a; } else { result = b; }`	`result = condition ? a : b;`	简化简单的 `if-else` 语句。
短路求值	`if (value) { doSomething(); }`	`value && doSomething();`	利用 `&&` 和 `\|\|` 的短路特性，简化条件判断。
可选链	`obj && obj.prop && obj.prop.nestedProp`	`obj?.prop?.nestedProp`	避免访问不存在的属性时报错。
空值合并运算符	`value !== null && value !== undefined ? value : defaultValue`	`value ?? defaultValue`	当值为 `null` 或 `undefined` 时，提供一个默认值。
解构赋值	`const name = obj.name; const age = obj.age;`	`const { name, age } = obj;`	从对象或数组中提取值，并赋给变量。
模板字符串	`"Hello, " + name + "! You are " + age + " years old."`	Hello, ${name}! You are ${age} years old.“	方便字符串拼接，支持嵌入变量。

最佳实践：如何优雅地使用简写

保持一致性: 在一个项目里，要么都用简写，要么都用传统的写法。不要混着用，否则代码风格会很混乱。
注重可读性: 如果简写让代码变得难以理解，那就不要用。可读性永远是第一位的。
了解背后的原理: 使用简写之前，一定要了解它的原理，避免出现意想不到的问题。
代码审查: 在团队开发中，可以通过代码审查来确保大家都遵循相同的简写规范。
结合lint工具: 使用eslint等lint工具，可以自动检测代码中不符合规范的地方，并给出建议。

彩蛋：更高级的用法 (Computed Property Names)

除了基本的简写之外，还可以结合 ES6 的 Computed Property Names 特性，实现更灵活的对象方法定义。

const methodName = "doSomething";

const myObject = {
  [methodName]() {
    console.log("执行了 " + methodName + " 方法");
  }
};

myObject[methodName](); // 输出: 执行了 doSomething 方法

在这个例子里，方法名 doSomething 是通过变量 methodName 来定义的。这种用法在某些动态生成的场景下非常有用。

总结：简写，让你的代码更上一层楼

对象方法定义的简写是 JavaScript 里一个非常实用的小技巧。它能让你的代码更简洁、更易读，同时也能提高你的开发效率。但是，在使用简写的时候，也要注意保持代码的可读性和一致性。

希望今天的讲座对大家有所帮助。记住，编程的道路是永无止境的，只有不断学习、不断实践，才能成为真正的编程高手。下次有机会，咱们再聊聊其他的编程技巧。再见！

发表回复 取消回复

发表回复取消回复