Using `super()` when extending `Object`

Question

I'm creating a class that extends Object in JavaScript and expect super() to initialise the keys/values when constructing a new instance of this class.

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

Why isn't foo defined as 'bar' on ext in this example?

EDIT

Explanation: Using `super()` when extending `Object`

Solution: Using `super()` when extending `Object`

Answer 1

Nobody has actually explained why it doesn't work. If we look at the latest spec, the Object function is defined as follows:

19.1.1.1 Object ( [ value ] )

When Object function is called with optional argument value, the following steps are taken:

1. If NewTarget is neither undefined nor the active function, then
   1. Return ? OrdinaryCreateFromConstructor(NewTarget, "%ObjectPrototype%").
2. If value is null, undefined or not supplied, return ObjectCreate(%ObjectPrototype%).
3. Return ! ToObject(value).

The first step is the important one here: NewTarget refers to the function that new was called upon. So if you do new Object, it will be Object. If you call new ExtObject it will ExtObject.

Because ExtObject is not Object ("nor the active function"), the condition matches and OrdinaryCreateFromConstructor is evaluated and its result returned. As you can see, nothing is done with the value passed to the function.

value is only used if neither 1. nor 2. are fulfilled. And if value is an object, it is simply returned as is, no new object is created. So, new Object(objectValue) is actually the same as Object(objectValue):

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

In other words: Object does not copy the properties of the passed in object, it simply returns the object as is. So extending Object wouldn't copy the properties either.

Answer 2

You are missing the 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

This answer works only when using the Babel transpiler.

Because Object's constructor returns value. See spec

15.2.2.1 new Object ( [ value ] )
When the Object constructor is called with no arguments or with one argument value, the following steps are taken:
...
8. Returns 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