在对象文字中设置原型

Question

我是一名学习JavaScript的初学者。 阅读这个页面，我无法理解这段代码是如何定义一个对象的。 我期待“foo：bar”构造并且不确定__proto__是否是内置名称或者在这里做一些特别的事情。 到底是怎么回事？

在ES2015中，扩展了对象文字以支持在构造时设置原型，foo：foo赋值的简写，定义方法，进行超级调用以及使用表达式计算属性名称。 它们一起使对象文字和类声明更加紧密，让基于对象的设计从一些相同的便利中受益。 MDN

 var obj = { // __proto__ __proto__: theProtoObj, // Shorthand for 'handler: handler' handler, // Methods toString() { // Super calls return "d " + super.toString(); }, // Computed (dynamic) property names [ 'prop_' + (() => 42)() ]: 42 }; 

Answer 1

那个代码片段实际上是普通旧key: value的一堆语法糖 key: value表示法。

__proto__: theProtoObj,

是的，这是一个特殊领域，而不仅仅是一个任意名称。 它是搜索继承树时使用的对象。 它的明确用途通常是不鼓励的。 阅读此Quora答案以便更好地理解它。

handler,

这是handler: handler语法糖。 通常，您希望在对象中有一个字段，并为具有相同名称的变量赋值，因此它们在规范中包含了该缩写。

var x = 10;
var y = 15;

// longhand
var point = { x: x, y: y };

// shorthand
var point = { x, y };

toString() {

这是语法糖：

var obj = {
    toString: function () {
        ...
    }
};

return "d " + super.toString();

super关键字使得从父类调用函数变得更加清晰。 之前它看起来像这样：

var Person = function (name) {
    this.name = name;
}

var Engineer = function (name) {
    // "super call"
    Person.call(this, name);

    this.profession = 'Engineer';
}

现在看起来像这样：

class Engineer extends Person {
    constructor (name) {
        super(name);

        this.profession = 'Engineer';
    }
}

[ 'prop_' + (() => 42)() ]: 42

可能是我的最爱。 此语法允许您在对象文字中包含动态密钥名称。 以前，你必须这样做：

var obj = {};
obj['prop_' + 42] = 42;

但是，使用动态文字语法，您可以这样做：

var obj = {
    ['prop_' + 42]: 42
};

(() => 42)()

语法糖用于：

// create an anonymous function and call it immediately
(function () {
    return 42;
})();