JavaScript Prototype and Prototype Chain
JavaScript Prototype and Prototype Chain
Before deep dive into those concepts let’s see what is the
person.name = 'Leo';
}person.sleep = function () {
console.log(`${this.name} is sleeping.`)
Then think of a scenario where you might need more than one person
in your program, what would you do in that case? You would create
Isn’t it?
person.name = name;
console.log(`${this.name} is eating.`)
} person.sleep = function () {
console.log(`${this.name} is sleeping.`)
} return person;
that?
memory.
const PersonMethods = {
eat = function () {
console.log(`${this.name} is eating.`)
},
sleep = function () {
console.log(`${this.name} is sleeping.`)
person.name = name;
person.age = age;
person.eat = PersonMethods.eat;
object once in the memory and at each time when we are creating a
had.
Wow, that is great right? Are we done?
No, Again this method also has some drawbacks. Can you guess?
Were you able to guess the issue with this code? If not don’t
worry let me explain the downside of this code. Let’s assume that
later we decided to add a new method to the Person, what would you
const PersonMethods = {
eat = function () {
console.log(`${this.name} is eating.`)
},
sleep = function () {
console.log(`${this.name} is sleeping.`)
},
walk = function () {
console.log(`${this.name} is walking.`)
},
person.name = name;
person.age = age;
person.eat = PersonMethods.eat;
person.sleep = PersonMethods.sleep;
common place where we can do changes like above and reflect those
Hope now you have a slight idea about what prototype is, before
dig into more on this topic let’s first understand one small
this.name = name;
this.age = age;
console.log(Person.prototype)
which points back to the function object and the function itself
JavaScript should be
evaluated true for Person.prototype.constructor ===
Person.prototype.constructor.prototype cases.
whatever the things I described above are correct. I hope now you
JavaScript.
solve the issue we had earlier. Let’s see what happens if we put
all our custom functions into the prototype object instead of
creating a separate object for those and assign them inside the
this.name = name;
this.age = age;
}Person.prototype.eat = function () {
console.log(`${this.name} is eating.`)
}Person.prototype.sleep = function () {
console.log(`${this.name} is sleeping.`)
}Person.prototype.walk =function () {
console.log(`${this.name} is walking.`)
follows :
Well, that is not the case, remember what we learned earlier and
happened.
There is another property in the Person instance Bob (i.e
object.
• Then behind the scene from the JavaScript engine, it adds a new
property called __proto__ to that instance which is a
getter/setter for the above Function’s prototype object.
• (Hope you read my article on Constructor Functions in
JavaScript if you are not familiar with JavaScript constructor
functions.)
That is what happened from the above code we wrote. And let me
Prototype Chain
exercise. Let’s create a simple object and then alert the object.
Okay, how on earth we get this [object Object] from the alert as
the scene. Let’s dig this bit further. First, let’s console out
prototype object. Let’s console log that and see whether we can
Ohh, There are lots of functions on it. But where this is coming
output we saw from alert might have generated from this method.
Let’s see.
object is this?
And that function has Object.prototype, which has all the methods
we saw earlier. If what we found out true then we can use the
with.
Object.
discussed :
Also please note that unlike other function’s prototype object,
should be null.
accessors Object.getPrototypeOf() and Object.setPrototypeO
f().
The Object.prototype property represents
the Object prototype object.
the Object.prototype.
learned is correct.
By specification, all built-in Objects in JavaScript has
There are few other things which I want to point out related to
should know that we can override those methods as the way we want.
when we are logging out the number array that we created we can
implementation to do this.
to console output.
All the other built-in objects also work the same way. Such as
Those objects created under the hood by the JavaScript engine and
primitives.
Since they do not have object wrappers, simply they will not have
additional methods and properties for them and also they don’t
learned.
Cheers!!