JavaScript ES6 - 如何像可以用“new”构造的那样超级构造对象？

Question

class Foo extends Object {
    constructor(value) {
        super(value)
    }
}

a = new Object(10);
b = new Foo(10);

console.log(a.valueOf() === b.valueOf()) // false, why?

Last time I checked, creating a class that extends another, and doing nothing but calling the super-class' constructor using this within the sub-class' constructor affects this the same way that the instance of the super class created using new is affected.

So why this inconsistency, and is there any work around?

I'm trying to create a class that instantiating returns whatever value was passed into the first argument of its constructor, but with additional properties assigned.

Answer 1

The problem is that Object only coerces to object when the NewTarget is undefined or is not the Object constructor itself. Otherwise, it returns an ordinary object which inherits from NewTarget's .prototype .

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 ).

In your case, when you instantiate Foo , the NewTarget will be Foo , so the this value will be initialized to Object.create(Foo.prototype) , not new Object(value) .

So you can't do this directly. But there is the manual approach:

 function valueOf(value) { var result; [Boolean, Number, String, Symbol, Object].some(function(F) { try { result = F.prototype.valueOf.call(value); return true; } catch(err) { return false } }); return result; } class Foo { constructor(value) { if(Object(value) === value) // Is an object return value; /* or maybe `return this`? */ switch(typeof value) { case 'boolean': return Reflect.construct(Boolean, [value], Foo); case 'number': return Reflect.construct(Number, [value], Foo); case 'string': return Reflect.construct(String, [value], Foo); case 'symbol': return Reflect.construct(Symbol, [value], Foo); } // For undefined and null, let it return `this` } } console.log(valueOf(new Object(true)) === valueOf(new Foo(true))); console.log(valueOf(new Object(10)) === valueOf(new Foo(10))); console.log(valueOf(new Object("ab")) === valueOf(new Foo("ab")));

Note you need a custom function to get the appropriate value. That's because, even if new Foo('10') returns a number object, it inherits from Foo.prototype , which does not include Number.prototype in its prototypical chain. But I guess this is intended, otherwise you could directly return Object(value) .