详解JavaScript之ES5的继承

JavaScript是一种弱类型、基于原型的语言，它的继承机制跟其他面向对象语言不一样。在ES5中，可以使用以下几种方式实现继承：

1. 原型链继承

原型链继承是利用原型链中的关系进行继承，通过将父类的实例作为子类的原型，让子类实例可以访问父类实例上的属性和方法。但是它也有一些缺点，例如原型中的引用类型属性是共享的，子类实例无法向父类构造函数中传递参数等。

以下是一个原型链继承的示例：

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

Person.prototype.sayHello = function() {
  console.log(`Hello, ${this.name}!`);
};

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

Student.prototype = new Person();

const tom = new Student('Tom', 2);
tom.sayHello(); // Hello, Tom!
console.log(tom.grade); // 2

2. 借用构造函数继承

借用构造函数继承是利用apply或call方法，将父类构造函数中的this指向子类实例，从而实现继承。但是它也有一些缺点，例如无法访问父类原型上的属性和方法，每个子类实例都会拥有一份相同的父类属性和方法的副本等。

以下是一个借用构造函数继承的示例：

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

Person.prototype.sayHello = function() {
  console.log(`Hello, ${this.name}!`);
};

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

const tom = new Student('Tom', 2);
tom.sayHello(); // TypeError: tom.sayHello is not a function
console.log(tom.grade); // 2

3. 组合继承

组合继承是将原型链继承和借用构造函数继承结合起来，既可以继承原型上的属性和方法，也可以向父类构造函数传递参数。但是它也有一个缺点，就是父类构造函数会被调用两次，造成了一些浪费。

以下是一个组合继承的示例：

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

Person.prototype.sayHello = function() {
  console.log(`Hello, ${this.name}!`);
};

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

Student.prototype = new Person();
Student.prototype.constructor = Student;

const tom = new Student('Tom', 2);
tom.sayHello(); // Hello, Tom!
console.log(tom.grade); // 2

4. 原型式继承

原型式继承是通过Object.create方法，以一个对象作为模板，创建一个新的对象，从而实现继承。它跟原型链继承类似，也存在共享属性和方法的问题，因为新创建的对象和原型之间是共享关系。

以下是一个原型式继承的示例：

const person = {
  name: 'Person',
  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
};

const student = Object.create(person, {
  grade: {
    value: 2
  }
});

student.sayHello(); // Hello, Person!
console.log(student.grade); // 2

5. 寄生式继承

寄生式继承就是在原型式继承的基础上，增强新对象，然后返回这个对象。它的缺点跟原型式继承类似，存在共享属性和方法的问题，而且无法做到函数复用。

以下是一个寄生式继承的示例：

function createStudent(person, grade) {
  const student = Object.create(person);
  student.grade = grade;
  return student;
}

const person = {
  name: 'Person',
  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
};

const tom = createStudent(person, 2);
tom.sayHello(); // Hello, Person!
console.log(tom.grade); // 2

以上就是ES5中几种常见的继承方式。在实际开发中，应该根据具体场景选用合适的继承方式，避免出现一些问题，尤其是多继承的情况下。

阅读剩余 64%