Understanding prototype Property of function

Question

Taken an example if

var Func = function(){}

Here Func has property called prototype and I can add my custom methods like the following.

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

As per my understanding here prototype is just another property of Func which is by default provided by the interpreter and is not used to delegate any functionality, ie. there is nothing like

Func.move()

Applying the same logic I am creating another property of the same function like the following

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

Now if a create a new object

var obj = new Func();

Here there is obj.move() but obj.method() wont be there. If prototype is just another property with no magical advantages then why this certain behavior ?? Thanks in advance !

Answer 1

When you use new the prototype property of the function will be used as a template for the internal [[Prototype]] property of the instance object. This is exposed in some browsers as __proto__, not to confuse with prototype which again, it is just a regular property.

When you attach a property to the function directly, as opposed to the prototype, you are basically using the function as a namespace. Since functions are objects, they can have arbitrary properties, and others are built-in, like prototype and name for example. In effect you are creating something similar to a static method, one that doesn't depend on the instance, that doesn't use this.

Answer 2

The prototype property of a function does have a special purpose: it will be set as the internal prototype of objects created by using this function as a constructor function (ie. when you use new).

So when you write var obj = new Func(); obj doesn't have an own property move, but when the lookup fails, it gets delegated upwards the prototype chain: to the prototype of obj, which is the Func.prototype you set earlier, which does have a move method.

On the other hand, adding move to Func is just creating a property of the function itself (functions are objects too, 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 read up more about how a function's prototype property works, I recommend Eloquent Javascript's chapter The Secret Life of Objects.

Answer 3

With move, you are adding the function to the object's prototype, thus it is available to newly created objects. With method, you are adding the function to the already created object Func.

Answer 4

prototype property is used to lookup the property/function in prototype chain. So when you ask a property of any object first its looked up on that object itself, if not found then its been searched through the object's prototypical chain upto Object. So particular to your example, you are adding method property directly on the Func object so it would be available only on that instance in this case on Func & you are adding the move property to the prototype of Func, so it would be made available through the prototypical chain lookup.