ES6对象文字中的简洁方法和非简洁方法 [英] ES6 concise methods and non-concise methods in object literals

问题描述

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

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

使用简洁方法语法的基本区别是什么，例如与 sub 相比，与 add 使用的传统非简洁方法语法相比呢？

What are the fundamental differences with using either the concise method syntax, such as sub acove, compared with the traditional non-concise method syntax used by add?

除了语法之间的明显区别之外， concise 和 non-concise 方法本质上是相同的吗？

Apart from the obvious differences between syntaxes, are concise and non-concise methods essentially the same?

推荐答案

一个明显的区别是简洁方法可以利用 super 关键字和 non-concise （又名：传统）方法不能。当更改对象原型以帮助继承时，这变得很重要。

One notable difference is that concise methods can utilize the super keyword and the non-concise (aka: traditional) methods cannot. This becomes pertinent when changing an object(s) prototype to aid inheritance.

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

To demonstrate this, consider the following gist:

示例：

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. 首先记录所有对象； 法语人， englishPerson 和多语言家，使用简洁方法语法。

1. Firstly note all objects; frenchPerson, englishPerson, and multilinguist, utilize the concise method syntax.

如您所见，名为的简洁方法会说话多语言专家对象的利用 super.speak（）指向其对象原型（以可能为准）。

As you can see, the concise method named speak of the multilinguist object utilizes super.speak() to point to the it's object prototype (whichever that may be).

将多种语言专家的原型设置为 frenchPerson 我们调用多种语言专家的 speak（）方法-会回复/记录：

After setting the prototype of multilinguist to frenchPerson we invoke multilinguist's speak() method - which replies/logs:

Bonjour，Hola

然后将多语言专家的原型设置为 englishPerson 并再次要求多语言专家到 speak（）-这次它答复/记录：

Then we set the prototype of multilinguist to englishPerson and ask multilinguist to speak() again - this time it replies/logs:

Hello，Hola

---

何时发生多语言专家的 speak（）方法是不简洁？

---

What happens when multilinguist's speak() method is non-concise?

在<$ c $中使用不简洁 speak（）方法时c>多语言学家对象除了超级引用外，还返回：

When using a non-concise speak() method in the multilinguist object in addition to the super reference it returns:

语法错误

如以下示例所示：

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 ，如下所示：

To achieve the above with a non-concise method; call() can be utilized as a replacement for super as demonstrated in the following:

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

这篇关于ES6对象文字中的简洁方法和非简洁方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！