ES6 对象字面量中的简洁方法和非简洁方法

Question

let module = {
     add: function(a, b){
        return parseInt(a) + parseInt(b);
     },

    sub(a, b){
        return parseInt(a) - parseInt(b);
    }
};

与@987654323 使用的传统非简洁 方法语法相比，使用简洁 方法语法（例如sub acove）的根本区别是什么@?

concise 和 non-concise 方法除了语法有明显区别外，本质上是一样的吗？

Answer 1

一个显着的区别是简洁方法可以使用super关键字，而非简洁（又名：传统）方法不能.这在更改对象原型以帮助继承时变得相关。

为了证明这一点，请考虑以下要点：

---

示例：

const frenchPerson = {
  speak() {
    return 'Bonjour';
  }
};

const englishPerson = {
  speak() {
    return 'Hello';
  }
};

const multilinguist = {
  speak() {
    return `${super.speak()}, Hola`
  }
};

console.log(frenchPerson.speak()) // -> "Bonjour"
console.log(englishPerson.speak()) // -> "Hello"

Object.setPrototypeOf(multilinguist, frenchPerson);
console.log(Object.getPrototypeOf(multilinguist) === frenchPerson); // true

console.log(multilinguist.speak()); // -> "Bonjour, Hola"

Object.setPrototypeOf(multilinguist, englishPerson);
console.log(Object.getPrototypeOf(multilinguist) === englishPerson); // true

console.log(multilinguist.speak()); // -> "Hello, Hola"

---

说明：

1. 首先注意所有对象； frenchPerson、englishPerson 和 multilinguist，使用 简洁 方法语法。

2. 如您所见，multilinguist 对象的名为speak 的简洁 方法利用super.speak() 指向它的对象原型（无论是哪个）。

3. 在将multilinguist 的原型设置为frenchPerson 后，我们调用multilinguist 的speak() 方法-回复/记录：

   Bonjour, Hola

4. 然后我们将multilinguist 的原型设置为englishPerson 并再次询问multilinguist 至speak() - 这次它回复/记录：

   Hello, Hola

---

当multilinguist 的speak() 方法不简洁时会发生什么？

当在multilinguist 对象中使用不简洁的speak() 方法时，除了super 引用它返回：

Syntax Error

如下例所示：

const englishPerson = {
  speak() {
    return 'Hello';
  }
};

const multilinguist = {
  speak: function() {           // <--- non-concise method
    return `${super.speak()}, Hola`
  }
};

Object.setPrototypeOf(multilinguist, englishPerson);

console.log(multilinguist.speak()); // -> Syntax Error

补充说明：

用一个不简洁的方法来实现上述； call() 可用作super 的替代品，如下所示：

const englishPerson = {
  speak() {
    return 'Hello';
  }
};

// Non-concise method utilizing `call` instead of `super`
const multilinguist = {
  speak: function() {
    return `${Object.getPrototypeOf(this).speak.call(this)}, Hola!`
  }
};

Object.setPrototypeOf(multilinguist, englishPerson);

console.log(multilinguist.speak()); // -> "Hello, Hola!"