详解JavaScript基于面向对象之继承

概述

继承是面向对象编程中非常重要的一个概念，在JavaScript中也有着广泛的运用。继承可以使代码更加简洁、优雅，使得实现代码复用更加方便。本文将详细讲解JavaScript基于面向对象之继承的完整攻略。

继承的概念

继承就是子类通过复用父类的属性和方法，使得子类可以从父类中获得所有的非私有成员。在JavaScript中，继承实际上是通过原型链的方式进行的。

继承的实现

实现继承有几种方式，在JavaScript中比较常见的继承方式有以下几种：

1. 原型链继承

原型链继承是最常见的一种继承方式。通过将子类的原型指向父类的实例，子类就可以获得父类的所有属性和方法。

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

Parent.prototype.getName = function() {
  return this.name;
}

function Child() {
  this.age = 18;
}

Child.prototype = new Parent();

var child = new Child();
console.log(child.getName()); // 输出name

2. 构造函数继承

构造函数继承是通过在子类中调用父类的构造函数，从而获得父类的成员。但是这种方式无法获得父类的原型链上的成员。

function Parent(name) {
  this.name = name;
  this.age = 30;
}

function Child() {
  Parent.call(this, '张三');
  this.gender = 'male';
}

var child = new Child();
console.log(child.name); // 输出 张三
console.log(child.gender); // 输出 male
console.log(child.age); // 输出 undefined

3. 组合继承

组合继承是将原型链继承和构造函数继承结合起来使用，从而既能获得原型链上的成员，又能获得构造函数内部的成员。

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

Parent.prototype.getName = function() {
  return this.name;
}

function Child(name) {
  Parent.call(this, name);
  this.age = 18
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child = new Child('张三');
console.log(child.getName()); // 输出 张三
console.log(child.age); // 输出 18

继承的示例

1. 原型链继承

// 父类
function Person(name) {
  this.name = name;
}

Person.prototype.getName = function() {
  return this.name;
}

// 子类
function Student(name, score) {
  this.score = score;
}

Student.prototype = new Person();
Student.prototype.getScore = function() {
  return this.score;
}

var student = new Student('小明', 90);
console.log(student.getName()); // 输出小明
console.log(student.getScore()); // 输出90

2. 组合继承

// 父类
function Animal(name) {
  this.name = name;
}

Animal.prototype.getName = function() {
  return this.name;
};

// 子类
function Dog(name, age) {
  Animal.call(this, name);
  this.age = age;
}

Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;
Dog.prototype.sayAge = function() {
  console.log('我' + this.age + '岁了');
};

var dog = new Dog('小狗', 2);
console.log(dog.getName()); // 输出小狗
dog.sayAge(); // 输出 我2岁了