JavaScript prototype property and prototype link

Question

I understand JavaScript prototype. But I get confused with the difference between prototype property and hidden prototype link. Also, what is the difference between Object prototype link and Function prototype link ?

I am seeking a very basic example to demonstrate the same (mainly the prototype link/chaining, like how it looks up for the property in terms of both Object prototype link and Function prototype link).

• Jayy: I don't think there's any kind of hidden link. At least not these days. The prototype property is all there is to it. Also there is no difference between an object prototype and function prototype.
• james emanon: go here: nice read - yehudakatz.com/2011/08/12/…

Answer 1

Document Object Model(DOM) is a beautiful example of inheritance in JavaScript.

Imagine you have a div. It's an instance of HTMLDivElement.

var div = document.createElement('div');
div instanceof HTMLDivElement; // -> true
div instanceof HTMLElement; // -> true
div instanceof Element; // -> true
div instanceof Object; // -> true

div is an Object and includes all methods and properties that is in HTMLDivElement.prototype. It's under __proto___ property but it doesn't mean you should do div.__proto__.insertBefore to access insertBefore. It's like an include in other languages.

In other words div.__proto__ is pointing to HTMLDivElement.prototype.

prototype is an Object. Because of that, it can have it's own __proto__ pointer. In this Case HTMLDivElement's prototype is an Object and have a __proto__ that is pointing to HTMLElement.prototype, so it includes all methods and properties. It goes down this path until Object.prototype that doesn't have a __proto__ pointer and lookup stups.

I tried to avoid using new keyword for explaining this. I hope it helps...