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

Question

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

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

与使用的传统非简洁方法语法相比，使用简洁方法语法（例如subacove）的根本区别是什么？add

除了语法上的明显差异外，简洁和非简洁方法本质上是一样的吗？

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. 正如你所看到的，简明的命名方法speak的的multilinguist对象采用super.speak()以点到它的原型对象（无论是可能）。

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

   Bonjour, Hola

4. 然后我们设置的原型multilinguist来englishPerson，问multilinguist到speak()再次-这一次回复/日志：

   Hello, Hola

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

除了引用之外，在对象中使用非简洁 speak()方法时，它返回：multilinguistsuper

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!"