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.

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.
What Is JavaScript Used For?
Tutorial
Introduction
Output
Syntax
Comment
Commands
Operators
Comparison and Logical Operators
Data Types
Math.random()
Type Conversion
Function Definitions
Events
Objects
Object Properties
Prototype
Array
Sorting Arrays
Strings
Numbers
Number Format
Math Object
Onclick Event
Date
Date Formats
Scope
Regular Expressions
Reserved Words
Common Mistakes
Performance
Forms
Form Validation
Window: The Browser Object Model
Popup Boxes
Cookies
JSON
AJAX Introduction
AJAX Form
Automatic File Download
Functions
Array Methods
String Methods
Date Methods
Timing Events
Cheat Sheet
JavaScript in HTML
HTML DOM Methods
HTML DOM Changing HTML
HTML DOM Animation
HTML DOM EventListener
HTML DOM Navigation
HTML DOM NodeList
HTML DOM Element Nodes
Array Functions
Boolean
Calling a Function
Date Functions
Global Objects
Input Text
Operator
Statements
String Functions
Math
Math.random
Number
RegEx
alert
array.filter
array.length
array.map
array.reduce
array.push
array.sort
break and continue
className
confirm
decodeURIComponent
for
forEach
if
indexOf
innerHTML
location.reload
number.toString
onclick
onload
parseInt
prompt
replace
setAttribute
setInterval
setTimeout
slice
splice
string.includes
string.indexOf
string.split
style.display
submit
substr
substring
switch
test
throw, try and catch
toLowerCase
toUpperCase
use strict
while
window.history
window.location
window.navigator
window.screen