Code has been added to clipboard!

Tutorial on JavaScript Prototype: Inheritance in JavaScript

Reading time 2 min
Published Apr 8, 2019
Updated Oct 1, 2019

Prototype in JavaScript is an object property which links an object to a different one. Inherited objects are bound to consist of properties from their parent objects, but you can apply additional properties as well.

Concepts to be discussed in this article include JavaScript prototype and prototypal inheritance, as well as JavaScript prototypal inheritance chain. We will also explain what a prototype in JavaScript is, how you can target and modify them.

JavaScript Prototype: Main Tips

  • Every single object in JavaScript has a prototype.
  • A prototype itself is an object too.
  • The objects inherit methods and properties from their prototypes.
  • Every object in JavaScript inherits from Object.prototype which is on the top of the prototype chain.

Prototypal Inheritance and the Prototype Chain

JavaScript inheritance means that all JavaScript objects inherit properties and methods from their JavaScript prototype:

  • Date objects inherit from Date.prototype.
  • Array objects inherit from Array.prototype.
  • Person objects inherit from Person.prototype.

The Object.prototype is on the top of the prototypal inheritance chain:
Date objects, Array objects, and Person objects inherit from Object.prototype.

Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

Using the prototype Property

The prototype property in JavaScript lets you add properties and methods to prototypes. In the example below, you can see a property added to a prototype.

Example
function Person(name, age, zodiac) { 
   this.name = name;
   this.age = age;  
   this.zodiac = zodiac;
}
Person.prototype.nationality = "Irish";

Similarly as properties, methods might be added to prototypes. See our next example to see how it's done:

Example
function Person(name, age, zodiac) { 
  this.name = name;
  this.age = age;  
  this.zodiac = zodiac; 
}

Person.prototype.info = function() { 
  return this.name + " " + this.age; 
};

Note: avoid modifying standard JavaScript objects. You should only change your own prototypes.

JavaScript Prototype: Summary

  • All objects in JavaScript have a prototype.
  • Objects inherit methods and properties from their prototypes.
  • Object.prototype is at the top of the prototypal inheritance chain.
  • Use the prototype property to add new properties and methods to a JavaScript prototype.

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 08/03/2021
3176 People Used
Only 97 Left
Rating
5.0