JavaScript Function Constructor Chaining Using The apply() Function

Question

I'm trying to understand some code Mozilla put out on constructor chaining. I've added comments to the parts I think I understand, but I'm still not clear on everything that's going on here. Can someone explain line by line what is going on in this code?

// Using apply() to chain constructors.
Function.prototype.construct = function (aArgs) {

    // What is this line of code doing?
    var fConstructor = this, fNewConstr = function () { fConstructor.apply(this, aArgs); };

    // Assign the function prototype to the new function constructor's prototype.
    fNewConstr.prototype = fConstructor.prototype;

    // Return the new function constructor.
    return new fNewConstr();
};

// Example usage.
function MyConstructor () {

    // Iterate through the arguments passed into the constructor and add them as properties.
    for (var nProp = 0; nProp < arguments.length; nProp++) {
        this["property" + nProp] = arguments[nProp];
    }
}

var myArray = [4, "Hello world!", false];
var myInstance = MyConstructor.construct(myArray);

// alerts "Hello world!"
alert(myInstance.property1); 

// alerts "true"
alert(myInstance instanceof MyConstructor); 

// alerts "MyConstructor"
alert(myInstance.constructor);

The original code can be found here.

Ryan Lynch · Accepted Answer · 2012-10-17 21:05:31Z

2

Basically, this is an alternate way to call a constructor function, which gives you the opportunity to wrap the constructor call in another function. I'll focus on the line you are confused about. fConstructor is set to this, which references our original constructor function, in this example that is MyConstructor. fNewConstr is the constructor which will override the original constructor. Within that fNewConstr you could implement additional code not found in the MyConstructor. Within fNewConstr, we call fConstructor using the Function apply method, passing this as the context, and the aArgs array passed to the construct method. Then we set the prototype of the fNewConstr to the fConstructor prototype to complete the inheritance chain. Finally, we return a new instance of fNewConstr. Prefixing the new keyword to a function call creates a new object, sets its prototype to the prototype of the function, and invokes the function in the context of the new item. Because we apply the fConstructor method with the fNewConstr's context, the result is essentially the same as calling new MyConstructor(). Make sense? Or do I need to go into more detail.

answered Oct 17, 2012 at 21:05

Ryan Lynch

7,7861 gold badge28 silver badges34 bronze badges

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

4 Comments

Halcyon Over a year ago

Thank you for your detailed answer. That makes sense. What kind of scenarios would you use for this type of constructor manipulation?

Ryan Lynch Over a year ago

You'd use something similar for any sort of OO inheritance situation. Lets say that you have a constructor function that creates Animal objects, and you want to extend the Animal constructor to create a Dog constructor. You may want to do some tasks specific to Dog objects in the Dog constructor, but you still want to apply the original Animal constructor to the object. This pattern allows you to do that.

Halcyon Over a year ago

This seems very similar to c# instance constructors.

Ryan Lynch Over a year ago

Yes, this is very similar to how overriding constructors works in a language that implements class inheritence.

Collectives™ on Stack Overflow

JavaScript Function Constructor Chaining Using The apply() Function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related