Javascript & Apply Inheritance

Question

I studied design patterns in Javascript and found http://tcorral.github.com/Design-Patterns-in-Javascript/Template/withoutHook/index.html to become a great source.

Can anyone explain the meaning of using ParentClass.apply (this)

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

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

Answer 1

It simply applies the parent constructor to the constructed object. Try adding some things to the CaffeineBeverage constructor and you will see what I mean.

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

Do not do this: Coffee.prototype = new CaffeineBeverage() . Do this instead:

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

For more on this, see this article , which also provides padding for older browsers that don't have Object.create .

Testing:

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

Answer 2

Instead of looking at this example, let us know:

 var Room = function() { this.doors = 1; }; 

Rather, like call , apply will execute this function, but let you specify what this . In the above example, I specify this.doors = 1 , which makes doors member when we create 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 really say that this in the context of the Room constructor is actually an instance of ComputerRoom , so I pass it to the apply : Room.apply(this) command.

Answer 3

The reason you invoke is used in the sub-class constructor to inherit all the properties of the instance.

Here is 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 invoke apply . In addition, apply allows you to send arguments (with our caffeine example). Arguments are placed in an object of type type in JavaScript, and apply takes an array to pass arguments to the function being called. This explains why use apply over call in this case (otherwise, call is faster and should be used when your code does not require an array of arguments).

Answer 4

This may help you: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply

Answer 5

Apply calls a function with a given this value and arguments provided as an array.

In your example, you will call the CaffeineBeverage function, but when this referenced inside this function, it will be the same object as this that is passed to it.

A source