CODEWITHSUNDEEP
javascript
Sankara
Sankara

Reputation: 1479

Why does this code use <function>.call()?

Code is from mozilla website

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

  if (price < 0)
    throw RangeError('Cannot create product "' + name + '" with a negative price');
  return this;
}

function Food(name, price) {
   Product.call(this, name, price);/// why not this be Product(name,price)
   this.category = 'food';
}
Food.prototype = new Product();

may very silly thing, can't understand this line
Product.call(this, name, price);

Since both Product and Food are global functions why do we have to use Product.call

Upvotes: 2

Views: 129

Answers (6)

Oliver Nightingale
Oliver Nightingale

Reputation: 1835

The Product function is a constructor, this would normally be called with new. Using new when calling a function creates a new empty object, and calls the function with the new object as the context, it also sets up the prototype chain.

In this example Food is sub-classing Product, it wants to run the Product constructor on the new instance of Food.

An example should make things clear:

var f = new Food ('apple', 10)

f.name = 'apple'
f.price = 10
f.category = 'food'

The name and price category is being added to the object by calling the Product constructor with the new instance of Food.

Upvotes: 3

Ben McCormick
Ben McCormick

Reputation: 25728

Product.call(this, name, price);

This line calls the product function with this as the calling object and name and price as arguments

This allows you to treat product as a method of Food without explicitly assigning it. Without doing this, any calls to "this" within product would point to the global object. Instead they are now assigned to the instance of Food that is being created.

A possible purpose of doing this in this case is to use Product to prepare the object in the constructor without making product a permanent part of the Food objects definition (which would happen if you assigned it as a method of Food, while still allowing it to be reused by others (which would be impossible if you made it part of the logic of the constructor function or an internal function within the constructor)

Upvotes: 2

Bergi
Bergi

Reputation: 664425

Because you want to apply the Product function on the food object. Just invoking it without call would lead to a wrong this value, and the properties added in Product would be attached to the wrong object.

Also learn here about inheritance.

Upvotes: 2

jbabey
jbabey

Reputation: 46647

the call function is a method of all Function objects. It allows you to pass a specific context to a function, essentially setting what the this keyword will be inside the function.

MDN Documentation for call()

Upvotes: 1

Minko Gechev
Minko Gechev

Reputation: 25682

There are multiple ways of invoking functions in JavaScript.

One of them is by calling the call method of the function object. It accepts the context (the meaning of this inside the function) and the function's arguments as other arguments.

Example:

var context = { foo: 'bar' };
function func(a, b, c) {
   console.log(this.foo);
   console.log(a, b, c);
}
func.call(context, 1, 2, 3);
//'bar'
//1 2 3

There's one more method which is similar to call it's apply. It accepts two arguments - the context and array with the parameters of the function.

Upvotes: 1

karaxuna
karaxuna

Reputation: 26930

in this case 

Product.call(this, name, price);

this -> is Food instance, not window

Upvotes: 1

Related Questions