Construct an object with a prototype using Function.apply()

Question

I'm having a bit of a dilemma getting my head around JS' prototypal inheritance. What I'm trying to do is:

Define an object called mod

var mod = function() {
    function sayGoodbye() {
        alert("Goodbye!");
    }

    function saySomethingElse(message) {
        alert(message);
    }

    return {
        sayGoodbye: sayGoodbye,
        saySomethingElse: saySomethingElse
    };
};

Define a prototype object called proto

var proto = {
    sayHello: function() {
        alert("Hello!");
    }
};

Set the prototype of mod to proto
```
mod.prototype = proto;
```

Call a function that constructs a new instance of mod with the proto prototype

function construct(constructor, args) {

    function constructorWrapper() {
        return constructor.apply(this, args)
    }

    constructorWrapper.prototype = constructor.prototype;

    return new constructorWrapper();
}

var foo = construct(mod, ["Other Message 1"]);
var bar = construct(mod, ["Other Message 2"]);

console.dir(foo);
console.dir(bar);

The construct function creates a new instance of mod correctly using the apply function but it's prototype is not proto. What am I missing that prevents mod from being constructed with proto as it's prototype?

Here is a fiddle with the above code.

Thanks heaps!!

Your mod function is a factory that returns an object. It should not be, it should be a constructor (or method) that initialises properties on this. — Bergi
– Bergi, Commented Feb 25, 2016 at 4:58
I wonder why you don't just use new mod("Other message 1")? — Bergi
– Bergi, Commented Feb 25, 2016 at 4:59
@squint: I guess step 4 was supposed to set up the prototype chain. It even would have, if constructorWrapper or constructor would not have returned an object. — Bergi
– Bergi, Commented Feb 25, 2016 at 5:00
@Bergi: Oh, I see. He was just transporting it. EDIT: I missed that he was actually assigning the function. Somehow I saw it as an IIFE. I wish people would use function declarations when able. — user1106925
– user1106925, Commented Feb 25, 2016 at 5:02

Craig Simpson · Accepted Answer · 2016-02-25 06:00:01Z

1

The reason the .prototype assignment isn't working for you is because setting the prototype chain like this only works when you use the new operator on a constructor function.

You created a factory function that returns a newly created object. Get rid of the return in mod and use this to attach your method and use new operator when creating instances of mod will make the .prototype assignment work.

This might be confusing so I updated your fiddle: https://jsfiddle.net/6fdo649y/1/

There are several ways to achieve what you are trying to do, but this example explains why you don't see .prototype work.

//Constructor function using this
function Mod(arg1) {
    this.sayGoodbye = function sayGoodbye() {
        alert("Goodbye!");
    }

    this.saySomethingElse = function saySomethingElse(message) {
        alert(message);
    }

    this.arg1 = arg1;
};

var proto = {
    sayHello: function() {
        alert("Hello!");
    }
};

Mod.prototype = proto;

function construct(constructor, args) {

    function constructorWrapper() {
        constructor.apply(this, args)
    }

    constructorWrapper.prototype = constructor.prototype;

    return new constructorWrapper();
}

var foo = construct(Mod, ["Other Message 1"]);
var bar = construct(Mod, ["Other Message 2"]);

console.dir(foo === bar);
console.dir(foo);
console.dir(bar);

edited: added in passing the args through with apply.

edited Feb 25, 2016 at 6:00

answered Feb 25, 2016 at 5:27

Craig Simpson

363 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bergi Over a year ago

Please add the changed code to your answer, not (only) to the fiddle.

Collectives™ on Stack Overflow

Construct an object with a prototype using Function.apply()

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related