How does prototype work in js?

Question

In the following code ,c __proto__ isn't pointing to a.prototype ,neither it is a instance of a so how is it able to access a's property?

https://code.sololearn.com/WFPlwDR5R6bQ/?ref=app

Answer 1

Abhay Not gonna lie... this is some rough looking code in both concept and naming conventions.

So... let's break it down:

__proto__: tied to object instance
prototype: tied to constructor object

So with:
c = new a()

The objects below are same:

c.__proto__ == a.prototype

Then, you have:

d = new b()

With:

d.__proto__ == b.prototype

But... the line below changes things:

c.__proto__ = d

Which would be like the following:

function m(){ }
m.prototype = d
c.__proto__ = m.prototype

Or even:

c = new m()

Then...

c.__proto__ == d

If you comment out this line:

//c.__proto__ = d

Then c.__proto__ is same as a.prototype. and c is instance of a.

You might also find the following to be interesting:

https://code.sololearn.com/WhmOwy6M1c1z/?ref=app

Answer 2

David Carroll and Ore thank you very much !:-)

Answer 3

David Carroll ty for the answer and that post but this is quite confusing ,I thought an constructor function instance __proto__ was pointing to it's prototype which had all the properties of that object but I see now that constructor function property prototype is just pointing to empty object and it's instance __proto__ is pointing to empty object as well ,and when we do c.__proto__=d ,instance d properties are assigned to __proto__ property of c and so we can now access function b properties as well while c holding the original properties of function a ,

I am sorry if above isn't readable ,I think I might need to go through many articles to get a good understanding of even the basics of prototype !

Answer 4

Abhay My first advice is to avoid reading anything aside from MDN and focus on empirical observations from well constructed code. This is where you establish the strongest understanding.

If you do choose to seek guidance from articles, just look for one or two well written articles.

The articles should come from a credible author with the following characteristics:

1. Author name is clearly visible and bio indicates they are actual programmers.

2. Date is clearly visible, best if in the URL.

3. Comments on that article are enabled and dates of each comment are visible.

4. Most comments support the talking points rather than disputing the author with strong rebuttals.

Answer 5

David Carroll thank your very much for the advise ,I will definitely keep that in mind while searching for one

Answer 6

Arjun Sharma 100%

Answer 7

Abhay A few good articles I've vetted for you to review:

https://hackernoon.com/understand-nodejs-javascript-object-inheritance-proto-prototype-class-9bd951700b29

This one is decent. I'm just not a fan of the analogy. But I think it works great for many others:

https://medium.com/javascript-in-plain-english/proto-vs-prototype-in-js-140b9b9c8cd5

MDN:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto

TOTAL ABSOLUTE GARBAGE:

https://www.geeksforgeeks.org/prototypal-inheritance-using-__proto__-in-javascript/

https://www.w3schools.com/js/js_object_prototypes.asp

----
Public Service Announcement:
--
I added the GFG and w3school links for comparison of the horrible misinformation promoted by these 2nd rate, amateur hack, wanna-be tech websites that are jointly responsible for confusing learners year after year.

While some of their content might be fine, too much is not.

Answer 8

The GFG article,

“Traditionally, in order to get and set the [[Prototype]] of an object, we use Object.getPrototypeOf and Object.setPrototypeOf. Nowadays, in modern language, it is being set using __proto__.”

WTF! 🤦

https://www.geeksforgeeks.org/prototypal-inheritance-using-__proto__-in-javascript/

To buttress Mr. Carroll's point, these GFG articles are garbage.

Answer 9

David Carroll are you trying to say that w3schools etc don't have right content??

Answer 10

Abhay I guess my answer is a little bit late but nonetheless, let me try my best to explain what is happening.

First of all, there are no classes in JavaScript.Yes you heard me right. Traditional Object oriented programming does not exist in JavaScript. What we have is faked OOP that is just syntactic sugar on top of JS's prototypal system.

So in this particular scenario, both a and b are not constructors, but rather, they are just normal functions. Also c is not an instance of anything. c is just a normal object.

In JavaScript, all what the keyword new does is to create an arbitrary object, link it's __proto__ property with the called functions prototype, and by default, it returns the newly created object. That's where the relationship between the newly created object ( c in your case) and the "constructor" ( a ) ends.

But now we end up with the object c being linked to another separate object called c.prototype. I guess you already know that assigning another object to a.___proto__ severs this link.

Answer 11

[Continuation]
Hence a.___proto__ == c.prototype returns false.

This now brings me to the instanceof keyword. Keep in mind that OOP does not exist in JS, and as such, the concept of instances does not exist. So what the purpose of instanceof if instances don't exist?

To answer that, let me quote Kyle Simpson from his book "this & object prototypes" , "The question instanceof answers is: in the entire [[Prototype]] chain of a(an arbitrary object), does the object arbitrarily pointed to by Foo(a's supposed constructor).prototype ever appear?".

In your case, 'c instanceof a' simply checks whether or not the object a.prototype appears anywhere along the entire prototypal chain of c. Which returns false since you had previously assigned c.___proto__ to d.

In conclusion, for you to fully understand JS prototype system, you have to first abandon the traditional Object Oriented way of thinking. It's quite different from JS's prototype system even though they might appear similar at first