笔记大全

JavaScript中常见的七种继承怎么实现

更新时间：2023-12-26

JavaScript是一门面向对象的语言。在面向对象编程中，继承是一项非常重要的特性。它使得一个类能够继承另一个类的属性和方法，避免了重复的代码，提高了代码的可重用性。在 JavaScript 中，有多种继承方式，本文将介绍其中的七种，包括原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承和 ES6 中的类继承实现方法。 ## 一、原型链继承原型链继承是 JavaScript 中最基本的继承方式，它利用原型链来实现。通过将一个构造函数的实例作为另一个构造函数的原型对象，从而让一个构造函数继承另一个构造函数的属性和方法。下面是一个实现原型链继承的例子： ```html

原型链继承示例

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

在上面的示例中，我们定义了一个 Person 构造函数和一个 Student 构造函数，Student 继承了 Person。创建 Student 的实例时，会将 Person 的实例作为其原型，这样就实现了继承。

## 二、借用构造函数继承借用构造函数继承是创造一个新对象时，可以先调用另一个构造函数将属性赋值给新对象。该方法的优点是可以继承另一个对象的属性和方法，但是不能继承另一个对象的原型对象上的属性和方法。下面是一个实现借用构造函数继承的例子： ```html

借用构造函数继承示例

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

在上面的示例中，我们定义了一个 Person 构造函数和一个 Student 构造函数，Student 继承了 Person。利用 call 方法调用了 Person 构造函数，并将其中的 this 指向了 Student 的实例，这样就实现了继承 Person 的属性。

## 三、组合继承组合继承是将原型链继承和借用构造函数继承结合起来的继承方式。它通过原型链实现对原型对象的属性和方法的继承，通过借用构造函数实现实例属性的继承。下面是一个实现组合继承的例子： ```html

组合继承示例

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

在上面的示例中，我们先通过借用构造函数实现了 Student 对象的实例属性的继承，然后通过原型链继承将 Person 对象的属性和方法继承到了 Student 对象上，从而实现了组合继承。

## 四、原型式继承原型式继承是指创建一个新对象时，可以将原有对象的原型对象作为新对象的原型对象来创建。下面是一个实现原型式继承的例子： ```html

原型式继承示例

function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
  
var person = {
  name: "Tom",
  age: 18
}
var student = object(person);
student.grade = "一年级";

在上面的示例中，我们定义了一个 object 函数，用来实现原型式继承。创建 student 对象时，先将 person 对象作为其原型对象，然后再添加 grade 属性，这样就实现了继承 person 对象的属性。

## 五、寄生式继承寄生式继承是指创建一个新对象时，可以在原型式继承的基础上，增强新对象的功能。它通过创建一个仅用于封装继承过程的函数，在调用函数时，将新对象作为参数传入，然后再增强新对象的功能。下面是一个实现寄生式继承的例子： ```html

寄生式继承示例

function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
  
var person = {
  name: "Tom",
  age: 18
}
function createStudent(person, grade) {
  var student = object(person);
  student.grade = grade;
  student.sayGrade = function() {
    console.log(this.grade);
  }
  return student;
}
var student = createStudent(person, "一年级");

在上面的示例中，我们利用原型式继承创建了 student 对象，然后通过创建 createStudent 函数来增强 student 对象的功能，最后返回 student 对象。createStudent 函数中添加了一个 sayGrade 方法来输出学生的年级。

## 六、寄生组合继承寄生组合继承是组合继承的优化版本，它通过寄生式继承来优化原型链继承的缺点，使用 Object.create() 方法来代替组合继承中的 new 操作符，从而实现更加优秀的继承方式。下面是一个实现寄生组合继承的例子： ```html

寄生组合继承示例

function inherit(child, parent) {
  var prototype = Object.create(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}
  
function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayName = function() {
  console.log(this.name);
}
  
function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}
inherit(Student, Person);

在上面的示例中，我们定义了一个 inherit 函数，这个函数用来实现寄生组合继承。然后创建了 Person 构造函数和 Student 构造函数，并通过寄生组合继承的方式继承了 Person 对象的属性和方法，从而实现了寄生组合继承。

## 七、ES6中的类继承在 ES6 中，JavaScript 引入了 class 类定义，为 JavaScript 增加了类似于 Java 和 C++ 的面向对象的语法，包括类继承。下面是一个实现 ES6 中的类继承的例子： ```html

ES6中的类继承示例

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayName() {
    console.log(this.name);
  }
}
  
class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }
}

在上面的示例中，我们定义了一个 Person 类和一个 Student 类，Student 继承了 Person。利用 extends 关键字来实现继承，利用 super 关键字来调用父类的构造函数，并继承了父类的属性和方法，从而实现了 ES6 中的类继承。

综上所述，JavaScript 中有多种继承方式，每种方式都有自己的特点和适用场景。我们应该根据实际需求来选择合适的继承方式，这样能够有效地提高代码的可读性和可重用性。

c语言编程笔录