Understanding Prototype Feature Property

Question

Took an example if

var Func = function(){} 

Here Func has a property called a prototype, and I can add my own methods as follows.

 Func.prototype.move = function(){ //do something } 

In accordance with my understanding, the prototype here is another Func property, which is provided by the interpreter by default and is not used to delegate any functionality, i.e. there is nothing like it

 Func.move() 

Using the same logic, I create another property of the same function as the following

 Func.method = function(){ //do something } 

Now, if you create a new object

 var obj = new Func(); 

There is obj.move() , but obj.method() will not be there. If a prototype is another property without magical benefits, then why is it a certain behavior? Thanks in advance!

Answer 1

When using new function's prototype property will be used as a template for the internal [[Prototype]] property of the instance object. In some browsers, this displays as __proto__ so as not to be confused with prototype , which is again a common property.

When you attach a property to a function directly, unlike prototype , you basically use this function as a namespace. Since functions are objects, they can have arbitrary properties, while others are built-in, for example, prototype and name . In fact, you are creating something similar to a static method that is independent of an instance that does not use this .

Answer 2

The function prototype property has a special purpose: it will be set as an internal prototype of objects created using this function as a constructor function (i.e. when using new ).

Therefore, when you write var obj = new Func(); , obj does not have its own move property, but when the search is not performed, it is delegated up the prototype chain: the obj prototype, which is Func.prototype, you install earlier, which has a move method.

On the other hand, adding a transition to Func just creates a property of the function itself (functions are also objects, so you can add properties to them) - you can call it with Func.move() , but it will have basically nothing to do with obj .

If you want to learn more about how the function prototype property works, I recommend the Eloquent Javascript chapter of The Secret Life of Objects .

Answer 3

When moving, you add a function to the prototype of the object, so it is available for newly created objects. Using the method, you add a function to an already created Func object.

Answer 4

Property

prototype used to search for a property / function in the prototype chain . Therefore, when you ask the property any object , you first looked at this object , if it is not found, its search is performed using the object prototypical chain upto object . Therefore, in your example, you add the method property directly to the Func object so that it is available only in this case on Func , and you add the move property to the Func prototype, so it will be available through the prototypical chain lookup .

Answer 5

The code below should explain the difference:

 Func = function(){}; Func.prototype.move = function(){ alert('move'); } Func.method = function(){ alert('method'); }; var obj = new Func(); //valid since move is defined using prototype and hence available on all instances of Func obj.move(); //valid since you just added a method to Func and invoking it directly using Func Func.method(); //invalid since method was not defined using prototype obj.method(); //invalid since move was not defined using prototype and hence available only on instances of Func and not as a property of Func Func.move();