bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

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

JavaScript Object Prototypes

Concept visual

JavaScript Object Prototypes

Pointer walk
two pointers
leftright102132436485116
left=0
right=6
1
3

Start at both ends

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. Previously you have learned learned how to use 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:

Example

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

JS Temporal Reference

Next

JavaScript Object Reference