DEV Community

What is Javascript's `new` keyword doing under the hood?

Vince Campanale on June 20, 2017

Good morning, afternoon, evening, night. I have some things to share with you about the new keyword in Javascript. Important things. I'll start w...

Read full post

Elias Baryshnikov • Jun 20 '17

In the edge case you should return this

Vince Campanale • Jun 21 '17

Okay, changed it. Is it correct now?

Elias Baryshnikov • Jun 21 '17 • Edited

Well, now I think you do not completely understand it yourself.

In the new2 function you apply the constructor to newObject, which makes 'this' inside the constructor to reference newObject, therefore after modifying 'this' in the constructor it should return 'this'.
After that new2 can just return the result of 'constructor.apply' which is the reference to newObject.

P.S. Cannot really edit with markdown from a mobile.

Vince Campanale • Jun 22 '17 • Edited

You are correct -- I'm certainly having difficulty with understanding how to handle the edge case(s). Always learning! Thanks for taking the time to discuss it with me.

So, it sounds like my initial implementation of new2 was correct to return constructor.apply(newObject, constructorArgs) || newObject, but you are saying the Constructor function itself (in the edge case) should return this rather than the object it is currently returning? I believe that would actually be a new edge case (in addition to the one presented above).

I tested my implementation in a REPL and it is handling the edge case of a Constructor returning an object correctly.

Would you mind providing a code snippet or copying and correcting the code in the article to convey your insight?

Thanks again for contributing!

Elias Baryshnikov • Jun 22 '17 • Edited

If constructor returns

    return {
      doors,
      color
    }

it is a completely different from newObject object reference and after that if new2 returns the result of constructor the newObject would be just lost in the new2 scope.

So it have to be like

function Car(doors, color) {
    this.doors = doors;
    this.color = color;
    this.drive = () => console.log('Vroom!');
    return this // equals to `newObject` ref
}

function new2(constructor, ...constructorArgs) {
    const newObject = {};
    Object.setPrototypeOf(newObject, constructor.prototype);
    return constructor.apply(newObject, constructorArgs); // bind newObject to constructor's `this` reference and call with args
}

Vince Campanale • Jun 22 '17

Ah okay, I see what you're saying now. I guess part of what I was trying to convey is that the constructor function can in fact return any object. In which case, the new function should just return that object as is.

What you've presented here is a more realistic edge case. I will think about a way to cover it in the article.

Great insights -- thank you.