扩展 `Object` 时使用 `super()`

Question

我正在创建一个在 JavaScript 中扩展 Object 的类，并期望 super() 在构造此类的新实例时初始化键/值。

class ExtObject extends Object {
  constructor(...args) {
    super(...args);
  }
}

const obj = new Object({foo:'bar'});
console.log(obj); // { foo: 'bar' }

const ext = new ExtObject({foo:'bar'});
console.log(ext); // ExtObject {}

console.log(ext.foo); // undefined

为什么在这个例子中ext 上的foo 没有定义为'bar'？

编辑

解释：Using `super()` when extending `Object`

解决方案：Using `super()` when extending `Object`

Answer 1

实际上没有人解释它为什么不起作用。如果我们看at the latest spec，Object函数定义如下：

19.1.1.1 对象（[值]）

当使用可选参数value调用Object函数时，将采取以下步骤：

1. 如果NewTarget既不是undefined也不是活动函数，那么
   1. 返回 ? OrdinaryCreateFromConstructor(NewTarget, "%ObjectPrototype%")。
2. 如果value 是null、undefined 或未提供，则返回ObjectCreate(%ObjectPrototype%)。
3. 返回！ ToObject(value)。

第一步在这里很重要：NewTarget 指的是调用new 的函数。因此，如果您使用new Object，它将是Object。如果你打电话给new ExtObject，它会ExtObject。

因为ExtObject 不是Object（“也不是活动函数”），所以条件匹配并且OrdinaryCreateFromConstructor 被评估并返回其结果。如您所见，传递给函数的value 没有做任何事情。

value 仅在 1. 和 2. 都不满足时使用。如果value 是一个对象，它只是按原样返回，不会创建新对象。所以，new Object(objectValue)其实和Object(objectValue)是一样的：

var foo = {bar: 42};
console.log(new Object(foo) === foo);
console.log(Object(foo) === foo);

换句话说：Object 不会复制传入对象的属性，它只是按原样返回对象。所以扩展 Object 也不会复制属性。

Answer 2

你错过了Object.assign

class ExtObject extends Object {
  constructor(...args) {
    super(...args);
    Object.assign(this, ...args);
  }
}

const obj = new Object({foo:'bar'});
console.log(obj); // { foo: 'bar' }

const ext = new ExtObject({foo:'bar'});
console.log(ext); // { foo: 'bar' }

console.log(ext.foo); // bar

Answer 3

此答案仅在使用 Babel 转译器时有效。

因为 Object 的构造函数返回值。见spec

15.2.2.1 新对象（[值]）
当 Object 构造函数不带参数或只带一个参数值调用时，将采取以下步骤：
...
8. 返回 obj。

class ExtObject extends Object {
  constructor(...args) {
    return super(...args);
  }
}

const obj = new Object({foo:'bar'});
console.log(obj); // { foo: 'bar' }

const ext = new ExtObject({foo:'bar'});
console.log(ext); // { foo: 'bar' }

console.log(ext.foo); // bar