JavaScript prototype (Prototype Object)

In JavaScript, prototype is a very important concept that provides objects with a mechanism for inheritance and shared properties. Every JavaScript object has an associated prototype object. Through the prototype object, properties and methods can be shared, thereby reducing memory usage.

All JavaScript objects inherit properties and methods from a prototype (prototype object).

  • Prototypeis an object that acts as a template or blueprint for other objects.
  • When an object tries to access a property or method, if it is not found on the object itself, JavaScript will look up the prototype chain until it finds the corresponding property or method, or reaches the top of the prototype chainnulland stops there.

The __proto__ Property of Objects

Every JavaScript object (except null) automatically has a hidden property __proto__, which points to the object's prototype object. This __proto__ is the key to implementing inheritance:

let obj = {};
console.log(obj.__proto__); // 输出: [object Object], 即 obj 的原型是 Object.prototype

Constructor and Prototype

In the previous chapters, we learned how to use the object constructor:

Example

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

Try it yourself »

We also know that you cannot add new properties to an object that already has a constructor:

Example

Person.nationality = "English";

Try it yourself »

To add a new property, you need to add it in 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"; }

Try it yourself »

When you create an object using a constructor function, the constructor'sprototypeproperty becomes the prototype of all instance objects created by that constructor function.

Example

function Person(name) {
    this.name = name;
}

Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name);
};

let alice = new Person("Alice");
alice.sayHello(); // Output: Hello, my name is Alice

In this example, Person.prototype is the prototype of the alice object, so alice can access the sayHello method.

Prototype Chain

In JavaScript, objects achieve inheritance through the prototype chain. When an object tries to access a property or method, JavaScript first checks whether the object itself has this property or method. If not, it looks up the prototype chain.

let obj = {};
console.log(obj.toString()); // 输出: [object Object]
// 这个 `toString` 方法实际上是从 `Object.prototype` 继承过来的

In the example above, the obj object does not define a toString method, so JavaScript searches along the prototype chain and finally finds the method in Object.prototype.

Modifying the Prototype

You can dynamically modify an object's prototype, which can affect all objects created based on that prototype:

Example

function Person(name) {
    this.name = name;
}

Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name);
};

let bob = new Person("Bob");
bob.sayHello(); // Output: Hello, my name is Bob

// Modify prototype
Person.prototype.sayGoodbye = function() {
    console.log("Goodbye from " + this.name);
};

bob.sayGoodbye(); // Output: Goodbye from Bob

In this example, we added a new method sayGoodbye to Person.prototype, and the bob object can immediately access this new method.

Object.create Method

The Object.create method allows you to create a new object and set its prototype to a specified object.

Example

let personPrototype = {
    sayHello: function() {
        console.log("Hello, my name is " + this.name);
    }
};

let alice = Object.create(personPrototype);
alice.name = "Alice";
alice.sayHello(); // Output: Hello, my name is Alice

In this example, alice's prototype is personPrototype, so the alice object can access the sayHello method.

Prototype Inheritance

All JavaScript objects inherit properties and methods from a prototype (prototype object):

  • DateObjects fromDate.prototypeinherit.
  • ArrayObjects fromArray.prototypeinherit.
  • PersonObjects fromPerson.prototypeinherit.

All objects in JavaScript are instances of Object, which is located at the top of the prototype chain.

JavaScript objects have a chain pointing to a prototype object. When trying to access a property of an object, it searches not only the object itself, but also the object's prototype, and the prototype of that prototype, and so on, searching layer by layer upward, until it finds a property with a matching name or reaches the end of the prototype chain.

DateObjects,ArrayObjects, andPersonobjects fromObject.prototypeinherit.

Adding Properties and Methods

Sometimes we want to add new properties or methods to all existing objects.

Additionally, sometimes we want to add properties or methods to an object's constructor.

Using the prototype property, you can add new properties to an object's constructor:

Example

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

Try it yourself »

Of course, we can also use the prototype property to add new methods to an object's constructor:

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; };

Try it yourself »
Other Extensions