Menu
I have only just started messing up with Javascript inheritance and can't get my hed round this one:
If I run this code:
function Foo(y) {
this.y = y;
}
Foo.prototype.x = 1;
var Bar1 = new Foo(2);
var Bar2 = new Foo(3);
I expect to have the following "structure" in memory:
I messed up in the graphic, Bar2 obviously has a value of "3" for its property "y"
And happily enough, I can confirm that, by running this code:
console.log("Prototype - x: ", Foo.prototype.x, " y: ", Foo.prototype.y);
console.log("Bar1 - x: ", Bar1.x, " y: ", Bar1.y);
console.log("Bar2 - x: ", Bar2.x, " y: ", Bar2.y);
which prints:
Prototype - x: 1 y: undefined
Bar1 - x: 1 y: 2
Bar2 - x: 1 y: 3
Correct me if I'm wrong but what is happening there is that when I try to access the property x in the Bar1 and Bar2 objects, as those objects don't localy have a property called x, I'm getting that property from the next object in the prototype chain; i.e. the one whose reference they store in their "_ proto _" property.
Now is when I get lost, because if I after that code I alter the value of x like this:
Bar1.x = 10;
when I now run
console.log("Prototype - x: ", Foo.prototype.x, " y: ", Foo.prototype.y);
console.log("Bar1 - x: ", Bar1.x, " y: ", Bar1.y);
console.log("Bar2 - x: ", Bar2.x, " y: ", Bar2.y);
what I'am getting is
Prototype - x: 1 y: undefined
Bar1 - x: 10 y: 2
Bar2 - x: 1 y: 3
instead of what I would expect :
Prototype - x: 10 y: undefined
Bar1 - x: 10 y: 2
Bar2 - x: 10 y: 3
At that moment I could only explain that by assuming that each object was creating a copy of the Foo.prototype object, but if I run this
console.log(Object.is(Foo.prototype, Bar1.__proto__), Object.is(Bar1.__proto__, Bar2.__proto__));
I get true true, so both Bar1, Bar2 are accesing the same object.
Why is Bar1 then showing a different value for x if they are both getting it from the same object?
953
Every object in JavaScript has a built-in property, which is called its prototype. The prototype is itself an object, so the prototype will have its own prototype, making what's called a prototype chain. The chain ends when we reach a prototype that has null for its own prototype.
Simply put, prototypical inheritance refers to the ability to access object properties from another object. We use a JavaScript prototype to add new properties and methods to an existing object constructor. We can then essentially tell our JS code to inherit properties from a prototype.
The Prototypal Inheritance is a feature in javascript used to add methods and properties in objects. It is a method by which an object can inherit the properties and methods of another object. Traditionally, in order to get and set the [[Prototype]] of an object, we use Object. getPrototypeOf and Object.
In JavaScript, every function and object has a property named prototype by default. For example, function Person () { this.name = 'John', this. age = 23 } const person = new Person(); // checking the prototype value console.
This line:
Bar1.x = 10;
does not change the value of x in the prototype. Instead it creates a new property (x) for Bar1 and assigns the value of 10 to it. Bar1 therefore no longer inherits x from its prototype as it now has its own property x.
Bar2 still does, which is why it still matches the prototype value.
138
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
