在对象字面量中设置原型

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

代码 sn-p 真的是一堆 syntactic sugar 用于普通的旧 key: value 符号。

__proto__: theProtoObj,

是的，这是一个特殊的字段，而不仅仅是一个任意名称。它是搜索继承树时使用的对象。通常不鼓励明确使用它。阅读this Quora answer 以更好地理解它。

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;
})();