I have been looking into design patterns in Javascript and found .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 /
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/
Share Improve this question edited Mar 1, 2012 at 13:05 Pramod Pallath Vasudevan asked Mar 1, 2012 at 13:00 Pramod Pallath VasudevanPramod Pallath Vasudevan 80911 silver badges23 bronze badges5 Answers
Reset to default 13It 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
Instead of looking at that example, let's flesh out our own:
var Room = function()
{
this.doors = 1;
};
Much like call
, apply
will execute the function, but allow you to specify what this
is. In the example above, I'm specifying this.doors = 1
, which makes doors
a member when we've created our instance of Room
.
Now, if I do this:
var ComputerRoom = function()
{
Room.apply(this);
// I can now access the this.doors member:
this.doors = this.doors + 1;
};
I'm actually saying that this
in the context of the Room
constructor, is actually the instance of ComputerRoom
, which is why I pass it into the apply
command: Room.apply(this)
.
The reason you are calling apply in the sub-"class" constructor is to inherit all instance properties.
Here's an example:
var CaffeineBeverage = function (caffeine) {
this.caffeineContent = caffeine || "100"; // 100mg / cup is an average
};
var Espresso = function (caffeine) {
// inherit instance properties
CaffeineBeverage.apply( this, arguments );
};
// do prototype dance to inherit shared properties
var protoCarrier = function () {};
protoCarrier.prototype = CaffeineBeverage.prototype;
Espresso.prototype = new protoCarrier;
var espressoCup = new Espresso(50);
espressoCup.caffeineContent; // 50
This is why you call apply
. Also, apply
allows you to send the arguments (with our example of caffeine
). Arguments are put in array-like object in JavaScript, and apply
accepts an array to pass arguments to the function that is being invoked. This explains why to use apply
over call
in this case (otherwise, call
is faster and should be used when your code doesn't require array of arguments).
This could help you: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply
Apply calls a function with a given this value and arguments provided as an array.
In your example you will be calling the CaffeineBeverage function, but when this
is referenced within that function it will be the same Object as the this
which is passed to it.
Source