javascript面向对象三大特征之继承实例详解

JavaScript面向对象三大特征之继承实例详解

在JavaScript中，继承是面向对象编程的一个重要概念。继承可以方便地重用已有代码，并且可以减少代码重复。本文将解释JavaScript中继承的三种方式，并提供详细的示例说明。

继承的三种方式

在JavaScript中，继承有三种方式：

1. 原型继承 （prototype inheritance）
2. 构造函数继承 （constructor inheritance）
3. 组合继承（combination of prototype and constructor inheritance）

原型继承

原型继承是JavaScript中最基本的一种继承方式。在原型继承中，一个对象可以继承另一个对象的属性和方法。具体来说，在原型继承中，一个对象可以通过它的原型链（prototype chain）继承另一个对象的属性和方法。继承的过程中，子对象通过其原型链查找父对象的属性和方法。

下面是一个具体的原型继承的示例：

// 定义父对象 Person
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 在父对象的原型中添加一个方法
Person.prototype.sayHello = function() {
  console.log(`My name is ${this.name}. I am ${this.age} years old.`);
};

// 定义子对象 Student
function Student(name, age, grade) {
  this.grade = grade;
  Person.call(this, name, age); // 使用call函数继承父对象的属性
}

// 将子对象的原型设置为一个新的父对象的实例，从而继承父对象的方法
Student.prototype = Object.create(Person.prototype);

// 在子对象中添加一个方法
Student.prototype.sayGrade = function() {
  console.log(`My grade is ${this.grade}`);
};

// 创建一个子对象并调用继承自父对象的方法和子对象的方法
const student = new Student("Tom", 15, "A");
student.sayHello(); // My name is Tom. I am 15 years old.
student.sayGrade(); // My grade is A

在上面的示例中，我们定义了一个父对象Person和一个子对象Student。在父对象的原型中，我们添加了一个方法sayHello。在子对象中，我们添加了一个新的属性grade和一个新的方法sayGrade。在子对象的原型中，我们使用Object.create()函数将其原型设置为一个新的父对象实例以继承父对象的方法。我们也使用了Person.call函数来继承父对象的属性。

构造函数继承

构造函数继承是另一种JavaScript中常用的继承方式。在构造函数继承中，一个对象可以通过调用另一个对象的构造函数来继承其属性和方法。具体来说，在构造函数继承中，子对象调用其父对象的构造函数来继承父对象的属性。

下面是一个具体的构造函数继承的示例：

// 定义父对象 Person
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 在父对象中添加一个方法
Person.prototype.sayHello = function() {
  console.log(`My name is ${this.name}. I am ${this.age} years old.`);
};

// 定义子对象 Student
function Student(name, age, grade) {
  Person.call(this, name, age); // 使用call函数继承父对象的属性
  this.grade = grade;
}

// 创建一个子对象并调用继承自父对象的方法和子对象的方法
const student = new Student("Tom", 15, "A");
student.sayHello(); // TypeError: student.sayHello is not a function

在上面的示例中，我们定义了一个父对象Person和一个子对象Student。在父对象中，我们添加了一个方法sayHello。在子对象中，我们使用了Person.call函数来继承父对象的属性，并添加了一个新的属性grade。但在这个示例里，子对象无法调用父对象的原型方法。这是由于，在这种继承方式中，我们无法继承父对象原型上的属性和方法。

组合继承

组合继承是JavaScript中最常用的继承方式。在组合继承中，一个对象可以同时使用原型继承和构造函数继承。具体来说，在组合继承中，我们先使用构造函数继承来继承父对象的属性，然后使用原型继承来继承父对象的方法。

下面是一个具体的组合继承的示例：

// 定义父对象 Person
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 在父对象的原型中添加一个方法
Person.prototype.sayHello = function() {
  console.log(`My name is ${this.name}. I am ${this.age} years old.`);
};

// 定义子对象 Student
function Student(name, age, grade) {
  Person.call(this, name, age); // 使用call函数继承父对象的属性
  this.grade = grade;
}

// 将子对象的原型设置为一个新的父对象的实例，从而继承父对象的方法
Student.prototype = Object.create(Person.prototype);

// 修正子对象的原型构造函数指向
Student.prototype.constructor = Student;

// 在子对象中添加一个方法
Student.prototype.sayGrade = function() {
  console.log(`My grade is ${this.grade}`);
};

// 创建一个子对象并调用继承自父对象的方法和子对象的方法
const student = new Student("Tom", 15, "A");
student.sayHello(); // My name is Tom. I am 15 years old.
student.sayGrade(); // My grade is A

在上面的示例中，我们定义了一个父对象Person和一个子对象Student。在父对象的原型中，我们添加了一个方法sayHello。在子对象中，我们使用了Person.call函数来继承父对象的属性，并添加了一个新的属性grade。在子对象的原型中，我们使用Object.create()函数将其原型设置为一个新的父对象实例以继承父对象的方法。我们也使用了Student.prototype.constructor = Student修正子对象的原型构造函数指向。

总结

在JavaScript中，继承有三种常见的方式：原型继承，构造函数继承以及组合继承。不同的继承方式适用于不同的场景。在实际开发中，我们应该选择最适合当前情况的继承方式。