bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths

Loading lesson path

Learn/JavaScript/Objects, Classes, and Advanced Patterns
JavaScript•Objects, Classes, and Advanced Patterns

JavaScript Object Prototypes

Prototype Inheritance

All JavaScript objects inherit properties and methods from a prototype:

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

The Object.prototype is on the top of the prototype inheritance chain.

Date objects, Array objects, and all other objects inherit from Object.prototype .

Adding Properties and Methods to Objects

Sometimes you want to add new properties (or methods) to all existing objects of a given type.

Sometimes you want to add new properties (or methods) to an object constructor.

Example

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

You cannot add a new property to an existing object constructor:

Person.nationality = "English";

To add a new property to a constructor, you must add it to the constructor function:

Example

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "English";
}

Using the prototype Property

The JavaScript prototype property allows you to add new properties to object constructors:

Example

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";

The JavaScript prototype property also allows you to add new methods to object constructors:

Example

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
  return this.firstName + " " + this.lastName;
};

Warning

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

Advanced Chapters

JavaScript Object Definitions

JavaScript Object Advanced this

JavaScript Object Iterations

JavaScript Object Getters & Setters

JavaScript Object Management

JavaScript Object Protection

JavaScript Object Prototypes

JavaScript Object Reference

Previous

Temporal Display Formats

Next

JavaScript Temporal Mistakes