Difference between myFunc.prototype vs new myFunc().prototype

Viewed 91
function myFunction() {};
myFunction.prototype.foo = "bar";

var myFuncInstance = new myFunction();

console.log('myFunction.foo:   '        + myFunction.foo); // Prints undefined
console.log('myFuncInstance.foo:   '    + myFuncInstance.foo); // Prints bar

Why myFunction.foo prints undefined here? where I already set the property foo as myFunction.prototype.foo = "bar".

4 Answers

In this case myFunc is not the object, it represents the class of the object. That means you can use the new keyword to create objects that have the same properties as the prototype of the class. It does not mean that you get a new series of properties on the function itself.

Following your example, this will work:

function myFunction() {};
myFunction.prototype.foo = "bar";

var myFuncInstance = new myFunction();

console.log('myFunction.prototype.foo: '  + myFunction.prototype.foo);
console.log('myFuncInstance.foo: '        + myFuncInstance.foo);

When you declare some variable into the prototype of the object you are attaching values to any instance of that object, so the values that are define into prototype will be accesible through instance, so when call myFunction.foo you are trying call .foo variable as a static variable, that's because myFunction is the contructor and not the instance of that constructor, when you call myFuncInstance.foo myFuncInstance is a instance already so you can access to the .foo variable because was defined into its ´prototype´.

So when is you really need to get access to this myFunction.foo you should define it as

function myFunction() {};
myFunction.foo = 'static bar'; // it can be accessed without instance

so when you call myFunctionInstance.foo, you should define it as follow

function myFunction() {};
myFunction.prototype.foo = 'instance bar'; // it can be accessed with instance
var myFunctionInstance = new myFunction();
myFunctionInstance.foo; // will print 'instance bar'

We all know, JavaScript objects inherit properties and methods from a prototype.

In your second log you have a proper instance ( Prototype Inheritance ) and in your first log you are accessing function property without any instance (directly with function name).

You will need an instance (myFuncInstance) to access the property not the function itself.

Every object has a prototype, when you use . to get one object's property. Firstly, it will find the properties of itself, if do not get the target property, it will find its prototype's properties, if still do not get the target property, it will continue to find properties of its proertype's propertype. After these, this case get easy.

After using new, you get a instance myFuncInstance, when using myFuncInstance.foo , beacause itself do not have a property called foo, it will get the property foo from its constructor myFunction's prototype.

However, when using myFunction.foo, myFunction alse do not have a property call foo, it will find its prototype Function.prototype, it also can not find foo, so find the Function.prototype's prototype Object.prototype, it still can not find, so find the Object.prototype's prototype null, all of the prototype chain can not find foo, so it is undefined.

Related