The concept of prototype in JavaScript is very confusing, especially to those who come with a C++/JAVA/... background. As an OOP langauge, JavaScript is very different from the languages with class. Its classless feature make it somehow difficult to understand. To muddy the water, JavaScript uses prototype-based inheritance but the prototype property of an object is not really 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 have learnt with you. Most of the findings I get is 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 x
x.constructor === abc; // not really, see (1)
typeof x.prototype === "undefined"; // cannot be 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 object
x instanceof abc === false; // x is no longer an 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.prototype
x = new abc(); // reassign new abc() to x
x instanceof abc === true; // x is an instance of abc again, see (3)
x.__proto__ === abc.prototype; // same now
abc.prototype.hasOwnProperty('constructor'); // the empty object does not has its own constructor
abc.prototype.__proto__.constructor === Object // the constructor of Object.prototype is used
x.constructor === Object; // x.__proto__.__proto__.constructor is accessed(3) The reason why x is an 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 are added to the __proto__ chain, x access the closest one in chain.
abc.prototype.color = "red";
x.color === "red"; // abc.prototype.color is accessed
Object.prototype.food = "potato";
x.food === "potato"; // Object.prototype.food is accessed
abc.prototype.food = "apple"; // now abc.prototype also has food property
x.food === "apple"; // food property in abc.prototype is accessed instead
Object.prototype.food === "potato"; // food property in Object.prototype remains unchanged
Conclusion
- Given a new object Obj. Obj does not have its own constructor property. Only Obj.__proto__ has the constructor.
- When a function Func is declared, an object Func.prototype is created too. Func.prototype is created with a property constructor:Func.
- (Obj1 instanceof Obj2) tracks down the __proto__ link of Obj1 to see if Obj2.prototype exists
- When Obj.prop1 is 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 that I will write more on this topic in the future!
