From the past posts we've seen about Prototype and Prototype Chaining in quite detail.Now we are going to see,how to link methods in the prototype chains and how i will be usefull in our cases.
Defining methods in the JavaScript prototype object
The Simple way to define a new method in the Prototype Object is,
`function Person(name) {
this.name = name;
}`
`Person.prototype.greet = function() {
return "Hi, I'm " + this.name + "!";
}`
by defining like this,Javascript Object add the greet() method to the Person.prototype Object.
Now let's create a new instance for the Person,
`let p1 = new Person('John');`
Internally Javascript creates a new Object p1 and links the Object with Person.prototype via prototype Linkage.
Let's visaualize it,
As You can see the Link between the p1, Person.prototype and Object.prototype is called as the Prototye Chain.
Now let's access the methods inside the Prototype Object,
`let greeting = p1.greet();
console.log(greeting);`
as you can see p1 doesn't have the greet() method and the javascript engine will search for it in the Person.prototype Object.
Since JavaScript can find the greet() method on the Person.prototype object, it executes the greet() method and returns the result
Now let's call the toString() method and let's see what happens,
`let s = p1.toString();
console.log(s);`
in this above case, the JavaScript engine follows the prototype chain to look up for the toString() method in the Person.prototype.
in our case the Person.prototype doesn't contains the toString() method and the prototype chain starts to search for it in the Object.prototype Object.Since JavaScript can find the toString() method in the Object.prototype, it executes the toString() method.
If you call the method that does'nt exist in the Person.prototype and Object.prototype.Javscript engine will search through the prototype chain and if it can't find the method it will throw an error.
`
p1.study()
`
Because the study() method doesn’t exist on any object in the prototype chain, the JavaScript engine issues the following error:
`TypeError: p1.fly is not a function`
Now let's create another instance of Person function with different name,
`let p2 = new Person('Jane');`
Now the p2 object holds all the properties and method p1 holds.
In conclusion, when you define a method on the prototype object, this method is shared by all instances.
let's create a method in the individual Object instead of in prototype,
`p2.draw = function () {
return "I can draw.";
};
`
The JavaScript engine adds the draw() method to the p2 object, not the Person.prototype object:
It means that you can call the draw() method on the p2 object:
`p2.draw();`
But you cannot call the draw() method on the p1 object:
`p1.draw()
`
TypeError: p1.draw is not a function
When you define a method in an object, the method is only available to that object. It cannot be shared with other objects by default.
that's all now for Prototypal Linkage in Javascript.I hope you all got good understanding in prototypal linkage.if you feel any diffuculties feel free to ask me in the comments.
Many Thanks for your valuable Time,
Sam
Top comments (6)
Niice article dude!
Just an observation: your code blocks has a "`" one more character 😅
Thank! Your Comments Just Motivates me more and more !!!!!
I'm really new into here and could'nt solve this code blocks Problem
Hope you know the solution! If yes Please rectify me !! Thanks
Sure, when you use code blocks you can pass the "language" parameter, for example:
And you only need three "`". If you have any questions, send me a message on discord: Renan Ferro#1957
Sure i'll ping you!
I'm always HAPPY to HELP !