Question

I have been looking into design patterns in Javascript and found http://tcorral.github.com/Design-Patterns-in-Javascript/Template/withoutHook/index.html to be a great source.

Can anyonne explain the significance of using ParentClass.apply(this)

var CaffeineBeverage = function(){

};
var Coffee = function(){
    CaffeineBeverage.apply(this);
};
Coffee.prototype = new CaffeineBeverage();

PS: I tried commenting the CaffeineBeverage.apply(this), but no effect was there. Here is a link to jsfiddle http://jsfiddle.net/pramodpv/8XqW9/

Answer 1

It simply applies the parent constructor to the object being constructed. Try adding some stuff to the CaffeineBeverage constructor and you’ll see what I mean.

var CaffeineBeverage = function(){
    this.tweakage = '123';
};

var Coffee = function(){
    CaffeineBeverage.apply(this);
};

Don’t do this: Coffee.prototype = new CaffeineBeverage(). Do this instead:

Coffee.prototype = Object.create(CaffeineBeverage.prototype);

For more information on that, see this article, which also provides a shim for older browsers, which don’t have Object.create.

Testing it out:

var drink = new Coffee();
console.log(drink.tweakage); // 123