js的三种继承方式详解

下面我将详细讲解 JavaScript 的三种继承方式。

1. 原型继承

原型继承是 JavaScript 中最基本的继承方式，它实现的原理是通过使用 prototype 属性。在原型继承中，子类的原型对象指向父类的实例对象，从而实现继承。

以下是一个实现原型继承的示例代码：

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name + ", I'm " + this.age + " years old.");
}

function Student(name, age, grade) {
    this.grade = grade;
    Person.call(this, name, age);
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

let stu = new Student("Tom", 20, 3);
stu.sayHello(); // Hello, my name is Tom, I'm 20 years old.
console.log(stu instanceof Student); // true
console.log(stu instanceof Person); // true

在上面的代码中，我们定义了一个 Person 构造函数，它拥有一个 sayHello 方法。然后我们定义了一个 Student 构造函数，我们通过 Object.create 方法使 Student 的原型对象指向 Person 的原型对象，实现继承，然后重置其 constructor 属性为 Student（Object.create 会将 constructor 属性重置为 Person）。最后我们创建一个 Student 实例，并且可以使用继承自 Person 的 sayHello 方法。

2. 构造函数继承

构造函数继承主要是通过在子类中调用父类构造函数实现的。在构造函数继承中，子类实例会继承父类的属性和方法。但是，这种继承方式无法继承父类原型上的属性和方法。

以下是一个实现构造函数继承的示例代码：

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name + ", I'm " + this.age + " years old.");
}

function Student(name, age, grade) {
    Person.call(this, name, age);
    this.grade = grade;
}

let stu = new Student("Tom", 20, 3);
stu.sayHello(); // TypeError: stu.sayHello is not a function
console.log(stu instanceof Student); // true
console.log(stu instanceof Person); // false

在上面的代码中，我们定义了一个 Person 构造函数，然后我们定义了一个 Student 构造函数，通过在 Student 中调用 Person 的构造函数实现属性和方法的继承。我们可以创建一个 Student 实例，并且可以使用从 Person 中继承的属性，但无法访问它的 prototype，因为 prototype 对象上的属性和方法不会继承到子类上。

3. 组合继承

组合继承是上述两种继承方式的结合体，它继承了构造函数继承和原型继承的优点。在组合继承中，通过在子类中调用父类构造函数实现属性的继承，然后将子类的原型对象指向父类的原型对象，实现方法的继承。

以下是一个实现组合继承的示例代码：

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name + ", I'm " + this.age + " years old.");
}

function Student(name, age, grade) {
    Person.call(this, name, age);
    this.grade = grade;
}
Student.prototype = new Person();
Student.prototype.constructor = Student;

let stu = new Student("Tom", 20, 3);
stu.sayHello(); // Hello, my name is Tom, I'm 20 years old.
console.log(stu instanceof Student); // true
console.log(stu instanceof Person); // true

在上面的代码中，我们定义了一个 Person 构造函数，它拥有一个 sayHello 方法。然后我们定义了一个 Student 构造函数，并在其中调用了 Person 的构造函数，实现属性的继承。最后我们通过将 Student 的原型对象指向一个新的 Person 的实例对象，实现从 Person 中继承方法。我们可以创建一个 Student 实例，并且可以使用从 Person 中继承的属性和方法。

以上就是 JavaScript 中的三种继承方式，不同的继承方式可以根据实际情况选择使用，从而更好地解决问题。