Prototypes and Inheritance

JavaScript
1

Tell us what’s happening:

I do understand that we can add properties to Constructor using prototype. But how come a object have prototype.
I do not understand it, I am totally confused. Can someone explain me please ?

https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/object-oriented-programming/understand-where-an-objects-prototype-comes-from

Your code so far


function Dog(name) {
  this.name = name;
}

let beagle = new Dog("Snoopy");

// Add your code below this line

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/object-oriented-programming/understand-where-an-objects-prototype-comes-from

2

They just do. Chapter from YDKJS

3

how come a object have prototype?
There it’s my notes:
Instance object has proto attribute, called prototype, is also an object, this attribute is used by the browser, not a standard attribute

The constructor has a prototype property called a prototype, which is also an object. This property is for programmers. It is a standard property ------>prototype—> can be called a prototype object.

The __proto__ of the instance object is equal to the prototype in the constructor --->true
And because the instance object is created by the constructor, there is a prototype object prototype in the constructor.
The __proto__ of the instance object points to the prototype object prototype of the constructor
1 Like
4

Yes, objects have a prototype. When you create an object, it inherets certain methods (functions attached to a prototype or class) and properties. For example

const myObj = {
  name: 'kevin',
  likes: 'chess',
}

console.log(myObj.hasOwnProperty('name'));
// true
console.log(myObj.hasOwnProperty('address'));
// false

The method hasOwnProperty is part of the object prototype that gets inherited when we create our object. We didn’t need to create it, it was already there.

But we could create our own method.

Object.prototype.numberOfProperties = function() {
  return Object.keys(this).length;
};

const myObj = {
  name: 'kevin',
  likes: 'chess',
}

console.log(myObj.numberOfProperties());
// 2

We added a method to the prototype and because we did it before our object was created, it inherited it.

The whole thing about prototypes and inheritence and stuff - it kind of gets glossed over in JS. This is part of object oriented programming. JS isn’t OOP, but it is OOPish. If you were doing a language like Java, this kind of understanding would be crucial.

Everything that isn’t a primitive data type will have a prototype. These would include Objects, Arrays, and Functions. Technically these are all Objects in JavaScript. An Array prototype inherits the Object prototype and adds some stuff onto it.

This is weird stuff. Don’t get frustrated if it doesn’t sink in the first time. Just try to understand it a little bit better each time. The book You Don’t Know JavaScript was mentioned. Those are great books. But be warned - they are hard books, especially the deeper you go. But they would be a good goal - if you understand everything in those books, you’ll know JS very well. But don’t get frustrated if they are difficult. They are free online in electronic form on their git repo.

6 Likes
5

Excellent answer from Kevin.

It might be worth adding than in modern JavaScript it is very unusual to use Object prototypes in your own code. Nowadays, we can use the class keyword to define object ‘blueprints’ and use extend to inherit properties from another class.

Under the hood, classes still make use of JavaScript’s prototype chain, but they provide a much friendlier syntax which is more similar to OOP in other languages.

There is a good intro here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model

2 Likes
6

That’s true that we’re less likely to use this and there is more preference for classes, understanding this is still important and might come in handy if you want to manipulate methods or properties directly on JS types. (Not that you were contradicting that.)

7

Actually you still use this quite a bit in OO code no matter what syntax you use. (I know what you meant BTW :stuck_out_tongue_winking_eye:)

8

Thank you all for helping. Sorry, I came up late. I was lost in california’s forests. Got my way back after 42 hours.

9

I am confused as a part that we can add properties to constructors and their instances by prototype. Prototype is property of constructor. Prototype is a object, But objects also have prototype. After reading all this, I can’t figure it out.

10

When you add the prototype to the constructor, a newly created object gets the prototype as well in a special slot called __proto__. Yes, it’s incredibly confusing. There’s a painstaking explanation of it in the excellent book You Don’t Know Javascript

2 Likes