Prototype and Constructor in JavaScript

The concept of prototype in JavaScript are very confusing, especially to those who come with a c++/java/... background. As an OOP langauge, JavaScript was very different from the languages withclass. Its classless feature make it somehow difficult to understand. To muddy the water, JavaScript usesprototype-based inheritance and the prototype property of a object is not rea Lly its prototype.

As a beginner, I read many articles and do some experiments to tidy up the mess of prototype. Here I would like to share what I had learnt with you. Most of the findings I get are experiment based so you can evaluate them by typing simple statements in the editor you use!

As Linus said, "Talk is cheap." Show me the code. Let me show you the demonstration code below. To begin, we have:

Function ABC () {//Nothing}var x = new ABC ();

First, let's look at the variable x: (All-Boolean expression evaluate to true in this article)

x.__proto__ = = = Abc.prototype; Abc.prototype is used to build xx.constructor = = = ABC; Not really, see (1) typeof X.prototype = = = "undefined"; Cannot is used to build new object

Then , we look at the function ABC:

typeof ABC = = = "function"; abc.__proto__ = = = Function.prototype;abc.constructor = = function; Not really, see (1) typeof Abc.prototype = = = "Object";

(1) The x.constructor actually does not exist. x.__proto__.constructor is accessed instead.

Abc.prototype.constructor = = = Abc;x.hasownproperty (' constructor ') = = = False;abc.prototype.hasownproperty (' Constructor ') = = = true;

(2) More on abc.prototype.constructor:

Abc.prototype = {}; Abc.prototype becomes a new empty objectx instanceof ABC = = FALSE; X is no longer a instance of ABC, see (3) X.constructor = = = ABC; Constructor property is still ABC, why?x.__proto__!== abc.prototype; Because __proto__ points at the old Abc.prototypex = new ABC (); Reassign new ABC () to xx instanceof ABC = = = True; X is a instance of ABC again, see (3) x.__proto__ = = = Abc.prototype; Same Nowabc.prototype.hasOwnProperty (' constructor '); The empty object does not have its own constructorabc.prototype.__proto__.constructor = = = Object/The constructor of O Bject.prototype is usedx.constructor = = = Object; X.__proto__.__proto__.constructor is accessed

(3) The reason why x is a instance of Object : Tracking down the __proto__ chain

abc.prototype.__proto__ = = = Object.prototype;abc.prototype instanceof Object = = = True;x.__proto__ = = = Abc.prototype;x instanceof ABC = = = True;x.__proto__.__proto__ = = = Object.prototype;x instanceof Object = = true;

(4) When properties is added to the __proto__ chain, x access the closest one in chain.

Abc.prototype.color = "Red"; x.color = = = "Red"; Abc.prototype.color is AccessedObject.prototype.food = "potato"; x.food = = = "Potato"; Object.prototype.food is Accessedabc.prototype.food = "Apple"; Now Abc.prototype also have food propertyx.food = = = "Apple"; Abc.prototype is accessed insteadObject.prototype.food = = = "Potato"; Food Object.prototype remains unchanged

Conclusion

1. Given a new object obj. obj does not has its own constructor property. Only obj.__proto__ have the constructor.
2. When a function Func was declared, an object Func.prototype is created too. Func.prototype is created with a property constructor:func.
3. (Obj1 instanceof Obj2) tracks down the __proto__ link of Obj1 to see if obj2.prototype exists
4. When OBJ.PROP1 was accessed, the whole __proto__ link is tracked to find the property in Obj ' s closest relative

Do you find it interesting? If Yes, please tell me so, I'll write more on this topic in the future!

Copyright notice: This article Bo Master original articles, blogs, without consent may not be reproduced.

Prototype and Constructor in JavaScript