Javascript面向对象之四 继承

在 Javascript 中，对象是通过原型 (prototype) 进行继承的。

原型链继承

原型链继承是最常见的继承方式。它的原理是通过把一个对象作为另一个对象的原型来实现继承。

示例1:

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

Animal.prototype.sayName = function() {
  console.log('My name is ' + this.name);
}

function Dog(name, color) {
  this.color = color;
}

// 继承 Animal
Dog.prototype = new Animal();

var dog1 = new Dog('Toby', 'brown');
dog1.sayName(); // My name is Toby

在上面的代码中，我们创建了一个 Animal 构造函数和一个 Dog 构造函数。我们想让 Dog 继承自 Animal，所以通过原型链把 Animal.prototype 赋值为 Dog.prototype 的原型。

借用构造函数继承

借用构造函数继承是通过在子类构造函数中调用父类构造函数来实现继承。

示例2:

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

Animal.prototype.sayName = function() {
  console.log('My name is ' + this.name);
}

function Dog(name, color) {
  Animal.call(this, name);
  this.color = color;
}

var dog1 = new Dog('Toby', 'brown');
dog1.sayName(); // 报错: dog1.sayName is not a function

在上面的代码中，我们使用了 Animal.call(this, name) 这种方式来实现继承。这行代码的作用是在 Dog 构造函数中调用 Animal 构造函数，并传入 Dog 构造函数的 this 和 name 参数。这样我们就能够通过 Dog 构造函数来创建 Dog 的实例对象 dog1。

但是这种继承方式不会继承 Animal.prototype 上的方法，所以 dog1.sayName() 会报错。如果我们想让 Dog 继承 Animal 的方法，我们需要在 Dog 构造函数中调用 Animal.call(this, name) 之后再把 Animal.prototype 中的方法复制到 Dog.prototype 中去。

示例3:

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

Animal.prototype.sayName = function() {
  console.log('My name is ' + this.name);
}

function Dog(name, color) {
  Animal.call(this, name);
  this.color = color;
}

// 继承 Animal 原型链上的方法
Dog.prototype = Object.create(Animal.prototype);

// 把 Dog.prototype 上的 constructor 设置为 Dog
Dog.prototype.constructor = Dog;

var dog1 = new Dog('Toby', 'brown');
dog1.sayName(); // My name is Toby

在上面的代码中，我们把 Dog.prototype 赋值为 Object.create(Animal.prototype)，这样 Dog.prototype 上就继承了 Animal.prototype 上的方法了。我们还需要把 Dog.prototype 上的 constructor 属性设置为 Dog。