Javascript call and apply on constructor functions

Question

I understand how call (and apply) method works in the following example.

var Bob = {
  name: "Bob",
  greet: function() {
   alert("Hi, I'm " + this.name);
  }
}

var Alice = {
 name: "Alice",
};

Bob.greet.call(Alice);   // Hi, I'm Alice

From what I understand, what's happening above is he greet method of Bob object is invoked with the scope of Alice.

Can someone explain what is happening behind the scenes in the below example, where the call method is used on a constructor function which allows inheritance?

function Product(name, price) {
  this.name = name;
  this.price = price;

}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

var chicken = new Food('chicken','40');
console.log(chicken);  //{ name= "chicken", price="40", category="food"}

I can't make the connection between the first and second example, where the first example the call method is invoked on a function that is doing something (alert), whereas in the second example, the call method is used on a constructor function that is initializing some properties.

Matt · Accepted Answer · 2013-01-09 11:56:16Z

1

It's a way of "borrowing" the constructor function of Product to initialize your new Food.

When you call a function with new, you're setting this to be the new instance. You're then doing Product.call (i.e. calling the Product function and setting this inside the Product function to be your new Food instance (which is this inside Food)), and passing your name and price.

After Product.call(this, name, price); you should find that this.name and this.price have been set.

This doesn't allow inheritance, nor do you gain inheritance; it just executes the constructor function Product on your new Food instance.

To gain inheritance, you'd also have to set the prototype of Food to be a new Product instance;

function Product(name, price) {
  this.name = name;
  this.price = price;
}

Product.prototype.showPriceIn = function (currency) {
    alert(this.price + currency);
} 

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

Food.prototype = new Product;

var chicken = new Food('chicken','40');
chicken.showPriceIn("$");

http://jsfiddle.net/hPWMN/

N.B: Be careful saying that "Bob is invoked with the scope of Alice"; this isn't true. Bob doesn't inherit the scope of Alice, the value of this inside the greet function is merely altered to be Alice. Inheriting the scope would imply Bob gains access to private variables and the like, which he doesn't.

edited Jan 9, 2013 at 11:56

answered Jan 9, 2013 at 11:49

Matt

75.4k26 gold badges156 silver badges181 bronze badges

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

5 Comments

eirikrl Over a year ago

I think the main part I don't understand is that when you are calling the Product function inside Food, how does the calling of that function give 'this' of Food the 'name' and 'price' property. Can you explain this part in particular?

Matt Over a year ago

@eirikrl: Because the first parameter to apply() and call() defines what the this should be inside the function, right? Inside the Food constructor, we're passing this, which is the new Food instance we've constructed (which you can see as this.category is being set to "food"). Therefore, everytime you do this.something = something inside Product after it has been call'd from Food the this is now the Food instance (like it was for this.category = "food").

Matt Over a year ago

... hope that makes more sense? Maybe the N.B at the bottom of my post will help as well? All call() and apply() does is call the function, but set the value of this to whatever you specify.

eirikrl Over a year ago

Nevermind I got it - thanks for the explanation! Marked as best answer.

kybernetikos Over a year ago

your Food.prototype = new Product; line is not really right, as it's running the constructor at definition time. A better solution (in modern browsers) is Food.prototype = Object.create(Product.prototype);.

nanobash · Accepted Answer · 2013-01-09 11:52:59Z

I'll try to explain with simple example, here it is

function Human(name,surname){
    this.name = name;
    this.surname = surname;
}

Human.prototype.method = function(){
    alert("Hi " + this.name + " " + this.surname);
};

var obj = new Human("Name","Surname");
obj.method();

In this case Human is constructor in which you are defining properties name and surname. prototype function makes extending with method function where I'm using this key. It refers to specified objects , which are defined from outside.

With var obj = new Human("Name","Surname"); you are initializing Human class and passing there values (name,surname). In this case you have one object named obj , but you can defined as many you like

Collectives™ on Stack Overflow

Javascript call and apply on constructor functions

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related