Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 12, 2023 10:21 am GMT

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;}`
`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.

Image description

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,

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);`

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.

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()`

Because the study() method doesnt 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:

Image description

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


Original Link: https://dev.to/samr/javascript-object-8-3k6m

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To