javascript，ES6 引入的方法（函数）的简写语法

ES6 为 JavaScript 中的对象方法提供了非常简洁的简写语法，让代码更精简、可读性更高。我会从基础概念到实际用法，帮你彻底理解这个语法特性。

 

一、核心概念与对比

 

在 ES6 之前，我们定义对象方法需要完整写出 方法名: function() {} 的形式；ES6 则允许直接省略 function 关键字和冒号，直接写 方法名() {}。

 

基础对比示例

// ES5 写法（传统）
const person = {
  name: "张三",
  sayHello: function() {
    console.log("你好，我是" + this.name);
  }
};

// ES6 方法简写（推荐）
const personES6 = {
  name: "张三",
  sayHello() { // 省略了 : function
    console.log(`你好，我是${this.name}`); // 配合模板字符串更简洁
  }
};

// 调用方式完全一致
person.sayHello(); // 输出：你好，我是张三
personES6.sayHello(); // 输出：你好，我是张三

运行结果如下：

二、常见使用场景

 

1. 普通对象方法简写

const calculator = {
  a: 10,
  b: 20,
  add() { // 简写加法方法
    return this.a + this.b;
  },
  subtract() { // 简写减法方法
    return this.a - this.b;
  },
  multiply() { // 支持参数
    return this.a * this.b;
  },
  divide(num) { // 带参数的简写
    return this.a / num;
  }
};

console.log(calculator.add()); // 输出：30
console.log(calculator.divide(5)); // 输出：2

运行结果如下：

2. 箭头函数？注意区别！

 

⚠️ 重要：方法简写的函数内部的 this 指向当前对象，而如果用箭头函数作为对象方法，this 会指向外层作用域（而非对象本身），这是最容易踩的坑：

const obj = {
  num: 10,
  // 正确：方法简写，this 指向 obj
  normalMethod() {
    console.log(this.num); // 输出：10
  },
  // 错误示范：箭头函数作为对象方法
  arrowMethod: () => {
    console.log(this.num); // 输出：undefined（this 指向全局/window）
  }
};

obj.normalMethod();
obj.arrowMethod();

运行结果如下：

3. 动态方法名 + 简写

 

结合 ES6 的动态属性名（方括号语法），可以实现更灵活的方法定义：

const methodName = "greet";
const user = {
  name: "李四",
  [methodName]() { // 动态方法名 + 简写
    console.log(`Hi, ${this.name}!`);
  }
};

user.greet(); // 输出：Hi, 李四!

运行结果如下：

4. 类中的方法简写（ES6 Class）

 

Class 本质是语法糖，其方法定义本身就采用了 ES6 方法简写的语法：

class Animal {
  constructor(name) {
    this.name = name;
  }
  // 类中的方法简写（无需 function）
  speak() {
    console.log(`${this.name} 发出叫声`);
  }
}

const dog = new Animal("小狗");
dog.speak(); // 输出：小狗 发出叫声

运行结果如下：

5. 与return结合的用法

 

function func(arr) {
  return { next() {} };
}

const result = func([1, 2, 3]);

// 1. 检查返回值数量（通过解构或赋值可以看出只有一个整体）
console.log(result); 
// 输出: { next: [Function: next] }

// 2. 检查类型
console.log(typeof result); 
// 输出: "object" (证明它是一个单独的对象)

// 3. 检查内部结构
console.log(typeof result.next); 
// 输出: "function" (next 只是这个对象的一个属性)

// 4. 模拟迭代器用法（这正是这段代码的典型用途）
// 这种写法通常用于实现自定义的 Iterator (迭代器)
const iterator = func();
console.log(iterator.next()); 
// 输出: undefined (因为 next 函数体是空的，没有 return 值)

运行结果如下：

总结

 

1. ES6 方法简写核心：对象中省略 : function，直接写 方法名() {}，调用方式与传统写法一致。
2. 简写方法的 this 指向当前对象，不要用箭头函数替代对象方法（会丢失 this 指向）。
3. 该语法适用于普通对象、Class 类、动态方法名等场景，是 ES6 最常用的简化语法之一。