JS中【继承】的两大主要方法_es6 js 继承另一个js-CSDN博客

本文链接：https://blog.csdn.net/2301_79858914/article/details/141126195

JavaScript中的继承是面向对象编程的重要概念之一。它允许一个对象继承另一个对象的属性和方法，从而实现代码的重用和组织。在JavaScript中，继承主要通过原型链（prototype chain）和ES6引入的class语法来实现。以下是关于JavaScript继承的详细解释：

1. 原型链继承

在JavaScript中，每个对象都有一个内部链接到另一个对象的属性，这个属性叫做[[Prototype]]。通常可以通过__proto__来访问。这个被链接的对象就是这个对象的原型，JavaScript通过这个原型来实现继承。

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

Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};

function Student(name, studentId) {
    Person.call(this, name); // 调用父构造函数
    this.studentId = studentId;
}

Student.prototype = Object.create(Person.prototype); // 继承Person
Student.prototype.constructor = Student; // 修复构造函数指向

Student.prototype.study = function() {
    console.log(`${this.name} is studying.`);
};

const student = new Student('John', 1234);
student.greet(); // 输出：Hello, my name is John
student.study(); // 输出：John is studying.

在这个例子中，Student通过原型链继承了Person的属性和方法。当student.greet()被调用时，JavaScript会先查找Student.prototype，如果找不到对应的方法，它会继续查找Person.prototype，直到找到方法或到达原型链的末端。

2. `class`语法的继承

ES6引入了class语法，使得面向对象编程更加直观和易于理解。虽然class只是语法糖，背后依然使用原型链，但它提供了更简洁的语法来实现继承。

class Person {
    constructor(name) {
        this.name = name;
    }

    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

class Student extends Person {
    constructor(name, studentId) {
        super(name); // 调用父类的构造函数
        this.studentId = studentId;
    }

    study() {
        console.log(`${this.name} is studying.`);
    }
}

const student = new Student('John', 1234);
student.greet(); // 输出：Hello, my name is John
student.study(); // 输出：John is studying.

在这个例子中，Student类通过extends关键字继承了Person类。super(name)在子类的构造函数中调用父类的构造函数，并将name传递给它。这样，Student对象就能继承Person的所有方法和属性。

3. 原型链的工作机制

当访问对象的属性或方法时，JavaScript首先会在对象自身查找。如果没有找到，它会继续查找该对象的原型，依次向上查找，直到原型链的顶端Object.prototype。如果仍然没有找到，返回undefined。

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

Animal.prototype.speak = function() {
    console.log(`${this.name} makes a sound.`);
};

const dog = new Animal('Dog');
dog.speak(); // Dog makes a sound