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

Do you find it interesting? If yes, please tell me so that I will write more on this topic in the future!