How does .call work in javascript?

Question

I saw this code on the MDN website:

01 function Product(name, value){ 02 this.name = name; 03 if(value >= 1000) 04 this.value = 999; 05 else 06 this.value = value; 07 } 08 09 function Prod_dept(name, value, dept){ 10 this.dept = dept; 11 Product.call(this, name, value); 12 } 13 14 Prod_dept.prototype = new Product(); 15 16 // since 5 is less than 1000, value is set 17 cheese = new Prod_dept("feta", 5, "food"); 18 19 // since 5000 is above 1000, value will be 999 20 car = new Prod_dept("honda", 5000, "auto"); 

It says that you can use calls to create chains. I have a few questions:

1) Why is line 14 called, why do we add it to the prototype, and why does this mean that Product is called when Prod_dept is created?

2) What does line 11 mean? How is this related to the prototype?

3) What does line 20 mean to show us?

Answer 1

1) Setting the Product instance as a prototype object for Prod_dept adds the values ​​and methods of this Product instance (and its prototype) to the prototype chain of all your Prod_dept instances.

It also allows instanceof show that an object created from Product_dept is an instance of both constructors.

 var a = new Product(); var b = new Product_dept(); a instanceof Product // true a instanceof Product_dept // false b instanceof Product // true b instanceof Product_dept // true 

2) Since this is a new object created by Prod_dept , .call allows you to set this object as the value of the Product method, so any Product method with this will execute on this new instance of Prod_dept (in this case, code is executed to add values ​​to the properties name and value ).

3) It just creates a new instance from the constructor Prod_dept .

In general, this is one template for using the prototype JavaScript inheritance mechanism.

Answer 2

The code simply demonstrates prototype inheritance in JavaScript.

1) What the code on line 14 says is that you want your Prod_dept function Prod_dept inherit the properties and characteristics of the underlying Product function.

Each JavaScript function has a prototype property and contains an object to which you can add methods and properties.

A prototype is a special property that is created as soon as you define a function. Its initial value is an empty {} object, but can be overwritten so that you can define your own methods or inherit them from another function.

2) Line 10 simply sets the property of the Prod_dept function Prod_dept value provided by the dept argument passed through the constructor.

3) Line 14 allows you to apply the other two name, value arguments to your base Product function, but in the context of your Prod_dept function. Further information on this method can be found here .

Answer 3

1) Line 14 forces Prod_dept to inherit the Dept object - at any time you create Prod_dept, it uses Dept as the base object.

2) Line 10 simply stores the words "auto" and "food" in the object's .dept attribute.

3) Line 20: When Prod_dept is created, JS also creates an instance of the Dept object, and this constructor (line 1) limits the value parameter to no more than 999 (lines 3-6)

Answer 4

1) Uses prototypal inheritance - prod_dept inherits from Product. More info if you google "prototypal inheritance".

2) This is what the constructor does - initializing the "dept" member.

3) Together with the comment above, it just shows that all the constructors will be called, so they are really chains.

I think your questions are a little missed. The magic of the call is that the first parameter will be "this" in the called function - if you use it in the constructor, the contructor will act on everything you pass as the first parameter to call - this way you can use the constructor on which anything, because you "fake" it to work on an arbitrary object.