You are here:Home-Javascript-JavaScript – Prototype And Inheritance

JavaScript – Prototype And Inheritance

Almost everything in JavaScript is Object and every JavaScript object has a prototype. All JavaScript objects inherit their properties and methods from their prototype. The prototype is also an object.

JavaScript’s inheritance system is prototypical, and not class-based. The prototype property is used primarily for inheritance in JavaScript.

We add methods and properties on a function’s prototype property to make those methods and properties available to instances of that function.

#. JavaScript Prototypes

  • We saw above how to add a method to our constructor function by merely declaring it inside the function.
  • Another approach is through prototyping. which is also more popular due to its elegance. Prototype is a type of inheritance in JavaScript.
  • We use it when we would like an object to inherit a method after it has been defined.
  • Think of prototyping mentally as “attaching” a method to an object after it’s been defined, in which all object instances then instantly share.

Example:
Create a “Person” Object First:

Let’s extend our original Person() object above with an additional method “Walk”  , using prototype:

As you can see we merely use the keyword “prototype” immediately following the object’s name “Person” to utilize this functionality. The custom method “walk()” is now shared by all instances of Person.

Inheritance

JavaScript’s inheritance system is prototypical, and not class-based. By using the “Prototype” property inheritance is achieved in JavaScript.

Inheriting properties

JavaScript objects have a link to a prototype object. When trying to access a property of an object, the property will not only be sought on the object but on the prototype of the object, the prototype of the prototype, and so on until either a property with a matching name is found or the end of the prototype chain is reached.

Inheriting “methods”

JavaScript does not have “methods” in the form that class-based languages define them. In JavaScript, any function can be added to an object in the form of a property. An inherited function acts just as any other property,

When an inherited function is executed, the value of this points to the inheriting object, not to the prototype object where the function is an own property.

Example:

As above, we already have a “Person” Object. Now create a “Programmer” which should inherit all the properties of “Person” and some specific properties and method only for “Programmer”.

So, Just add a property “Code” only specific to the “Programmer”-

Now, Clone the “Person” prototype to the “Programmer” prototype –

This is exactly where the magic happens! By cloning the prototype, we transfer all properties and functions to the new class.

Now, add a method “writecode” only specific to the “Programmer”-

Using prototype on prebuilt JavaScript objects:

Prototyping works on both custom objects and select prebuilt objects, such as Date() or String. For the later, the general rule is that you can prototype any prebuilt object that’s initialized with the “new” keyword.

Example: Adding additional functionality to the prebuilt Array object of JavaScript. IE5 doesn’t support the shift() and unshift() methods of Array that NS4+ does, so lets prototype them in!

NOTE: – Only modify your own prototypes. Never modify the prototypes of standard JavaScript objects.

By | 2017-10-23T18:04:47+00:00 October 15th, 2017|Categories: Javascript|0 Comments

About the Author:

Front-End Engineer

Leave A Comment