In-depth understanding of inheritance and prototype chain in JavaScript

This article will explain the inheritance and prototype chain in JavaScript in detail, with a comprehensive analysis of the text and code, which has certain reference value. Friends who need it can refer to it. I hope it can help you.

Almost everything in Javascript is an object. Each object has an internal property that is linked to other objects, which we call prototype. The prototype object itself also has its own prototype object, and so on. At this time, the prototype chain comes out. If you trace the prototype chain, you will eventually reach the kernel Object whose prototype is null, which is the end of the prototype chain.

What is the role of the prototype chain? When we access a property that the object does not own, Javascript searches the prototype chain until it finds the property or the end of the prototype chain. This behavior ensures that we can create "classes" and implement inheritance.

If you don’t understand it yet, it doesn’t matter, let us understand it in practice. Now look at the simplest example of Javascript: a "class" created in the method object

function Animal() {}
var animal = new Animal();

There are two ways for us to add properties to this Animal class: setting the properties of the instance or adding the Animal prototype.

function Animal(name) {
    // Instance properties can be set on each instance of the class
    this.name = name;
}
// Prototype properties are shared across all instances of the class. However, they can still be overwritten on a per-instance basis with the `this` keyword.
Animal.prototype.speak = function() {
    console.log("My name is " + this.name);
};
var animal = new Animal('Monty');
animal.speak(); // My name is Monty

The structure of the Animal object becomes clear when looking at the console. We can see that the name attribute belongs to the object itself, while speak belongs to the Animal prototype.

Now please take a look at how we extend the Animal class to create a Cat class:

function Cat(name) {
    Animal.call(this, name);
}
Cat.prototype = new Animal();
var cat = new Cat('Monty');
cat.speak(); // My name is Monty

What we have done is to set the prototype of Cat to an Animal instance, so Cat will inherit all the properties of Animal . Similarly, we use Animal.call to inherit the constructor of Animal. call is a special function that allows us to call a function and specify the value of this in the function. So when this.name is in Animal's constructor, Cat's name is set, not Animal's.

Let's take a look at the Cat object:

As we expected, the Cat object has its own name instance attribute. When we look at the object's prototype we see that it also inherits the name instance property of Animal, as does the speak prototype property. This is what the prototype chain looks like. When cat.name is accessed, JavaScript looks for the name instance property and does not search further down the prototype chain. Regardless, when we access cat.speak, JavaScript has to search further down the prototype chain until it finds the speak property inherited from Animal.

The above is the detailed content of In-depth understanding of inheritance and prototype chain in JavaScript. For more information, please follow other related articles on the PHP Chinese website!