DEV Community

Cover image for Javascript Object #8
Asir-Sam
Asir-Sam

Posted on

Javascript Object #8

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;
}`
Enter fullscreen mode Exit fullscreen mode
`Person.prototype.greet = function() {
    return "Hi, I'm " + this.name + "!";
}`
Enter fullscreen mode Exit fullscreen mode

by defining like this,Javascript Object add the greet() method to the Person.prototype Object.

Image description

Now let's create a new instance for the Person,

`let p1 = new Person('John');`
Enter fullscreen mode Exit fullscreen mode

Internally Javascript creates a new Object p1 and links the Object with Person.prototype via prototype Linkage.

Let's visaualize it,

Image description

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);`
Enter fullscreen mode Exit fullscreen mode

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);`
Enter fullscreen mode Exit fullscreen mode

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.

Image description

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()
`
Enter fullscreen mode Exit fullscreen mode

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`
Enter fullscreen mode Exit fullscreen mode

Now let's create another instance of Person function with different name,

`let p2 = new Person('Jane');`
Enter fullscreen mode Exit fullscreen mode

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.";
};
`
Enter fullscreen mode Exit fullscreen mode

The JavaScript engine adds the draw() method to the p2 object, not the Person.prototype object:

Image description

It means that you can call the draw() method on the p2 object:

`p2.draw();`
Enter fullscreen mode Exit fullscreen mode

But you cannot call the draw() method on the p1 object:

`p1.draw()
`
TypeError: p1.draw is not a function
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
renancferro profile image
Renan Ferro

Niice article dude!

Just an observation: your code blocks has a "`" one more character 😅

Collapse
 
asir-sam profile image
Asir-Sam

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

Collapse
 
renancferro profile image
Renan Ferro

Sure, when you use code blocks you can pass the "language" parameter, for example:

Image description

And you only need three "`". If you have any questions, send me a message on discord: Renan Ferro#1957

Thread Thread
 
asir-sam profile image
Asir-Sam

Sure i'll ping you!

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
asir-sam profile image
Asir-Sam

I'm always HAPPY to HELP !