How does JavaScript implement inheritance?

JavaScript is an object-oriented language, and inheritance is an important feature of object-oriented programming. In JavaScript, there are many ways to implement inheritance. This article will introduce some of the more common methods.

1. Prototype chain inheritance

Prototype chain inheritance is the most basic inheritance method in JavaScript and the most commonly used one. Through prototype chain inheritance, subclasses can inherit the properties and methods of parent classes.

The implementation method of prototype chain inheritance is as follows:

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    this.age = age;
    Parent.call(this, name);
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

In the above code, we first define a parent class Parent and a subclass Child. In Child, we use Parent.call(this, name) to call the parent class constructor, and point Child's prototype to Parent through Child.prototype = new Parent(), thus realizing inheritance. At the end, we created two subclass instances, child1 and child2, and verified the effect of inheritance.

The advantage of prototype chain inheritance is that it is simple to implement and easy to understand. But its shortcoming is also obvious, that is, it will cause the reference type properties in the prototype object to be shared by all instances.

2. Constructor inheritance

Constructor inheritance is a relatively easy-to-understand inheritance method. It achieves inheritance by calling the parent class constructor in the subclass constructor.

The implementation method of constructor inheritance is as follows:

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // TypeError: child1.sayName is not a function 

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // TypeError: child2.sayName is not a function

In the above code, we use Parent.call(this, name) in the subclass constructor Child to call the parent class constructor, and Inheritance is achieved by pointing this to the subclass instance. However, since constructor inheritance does not inherit the methods in the parent class prototype, we cannot directly call the methods in the parent class prototype in the subclass.

The advantage of constructor inheritance is that it avoids the problem of reference type attributes being shared by all instances in prototype chain inheritance, but its disadvantage is also obvious, that is, the methods in the parent class prototype cannot be inherited.

3. Combined inheritance

Combined inheritance is the most commonly used inheritance method in JavaScript. It is a way to combine prototype chain inheritance and constructor inheritance, solving the problem of both. their respective shortcomings.

The implementation method of combined inheritance is as follows:

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

In the above code, we use Parent.call(this, name) in the subclass constructor Child to call the parent class constructor and this points to the subclass instance, thereby realizing inheritance. At the same time, we pass Child.prototype = new Parent() in the subclass prototype to make the subclass inherit the prototype of the parent class, thus inheriting the methods in the prototype of the parent class.

The advantage of combined inheritance is that the inheritance method is complete. It can not only inherit the methods in the parent class prototype, but also avoid the problem of reference type attributes being shared by all instances in prototype chain inheritance. But its disadvantage is that it calls the parent class constructor twice, which wastes a certain amount of memory space.

4. Parasitic combination inheritance

Parasitic combination inheritance is an optimization method of combination inheritance. It avoids the problem of calling the parent class constructor multiple times in the subclass prototype, thereby reducing memory overhead.

The implementation method of parasitic combination inheritance is as follows:

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

Child.prototype = Object.create(Parent.prototype, {
    constructor: {
        value: Child,
        enumerable: false,
        writable: true,
        configurable: true
    }
});

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

In the above code, we use the Object.create() method in the subclass prototype to create a copy of the parent class prototype and pass it through Object The second parameter of .create() overrides the constructor property of the subclass prototype so that it points to the subclass itself. Since the Object.create() method does not call the parent class constructor, it avoids the problem of calling the parent class constructor multiple times in the child class prototype.

The advantage of parasitic combination inheritance is that it not only inherits the methods in the parent class prototype, but also avoids the problem of calling the parent class constructor multiple times in the child class prototype. The disadvantage is that the implementation is more complicated.

In short, there are many ways to implement inheritance in JavaScript, and each method has its own advantages and disadvantages. In actual development, we should choose the appropriate inheritance method according to the specific situation.

The above is the detailed content of How does JavaScript implement inheritance?. For more information, please follow other related articles on the PHP Chinese website!