JS Pro-深入面向对象的程序设计之继承的详解

JS Pro-深入面向对象的程序设计之继承的详解

本攻略将从以下内容入手，逐步深入探讨JavaScript面向对象编程中的继承。

1. 原型链继承
2. 构造函数继承
3. 组合继承
4. 原型式继承
5. 寄生式继承
6. 寄生组合式继承

原型链继承

原型链继承，顾名思义，指的是连接原型链的方式进行继承。简单来说，就是在子类的构造函数中通过关联父类的原型实现继承。

function Parent() {
  this.parentName = 'Tom';
}

Parent.prototype.sayHello = function() {
  console.log("Hello, " + this.parentName);
}

function Child() {
  this.childName = 'Jerry';
}

Child.prototype = new Parent();

Child.prototype.sayHi = function() {
  console.log("Hi, " + this.childName);
}

var child = new Child();
child.sayHello();    //输出 "Hello, Tom"
child.sayHi();       //输出 "Hi, Jerry"

构造函数继承

构造函数继承，就是通过在子类的构造函数中调用父类的构造函数实现继承。这里使用apply方法绑定this，实现让子类接受父类的私有属性。

function Parent(name) {
  this.parentName = name;
  this.sayHello = function() {
    console.log("Hello, " + this.parentName);
  }
}

function Child(name) {
  Parent.apply(this, [name]);
  this.childName = 'Jerry';
  this.sayHi = function() {
    console.log("Hi, " + this.childName);
  }
}

var child = new Child('Tom');
child.sayHello();     //输出 "Hello, Tom"
child.sayHi();        //输出 "Hi, Jerry"

组合继承

组合继承，把原型链继承和构造函数继承结合起来使用，这是一种最常用的继承方式。它通过在子类的构造函数中调用父类的构造函数，实现了继承父类的私有属性；通过将父类的原型赋值给子类的原型，实现了继承父类的共有属性和方法。

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

Parent.prototype.sayHello = function() {
  console.log("Hello, " + this.parentName);
}

function Child(name) {
  Parent.call(this, name);
  this.childName = 'Jerry';
}

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

Child.prototype.sayHi = function() {
  console.log("Hi, " + this.childName);
}

var child = new Child('Tom');
child.sayHello();     //输出 "Hello, Tom"
child.sayHi();        //输出 "Hi, Jerry"

原型式继承

原型式继承，是通过利用已有对象创建新对象，作为形参传入，即可创建一个新对象的方式实现继承。虽然它看上去很灵活、简单，但它的继承关系是实现在对象之间的，不能描述基于类的继承，因此这种方式并不是很常用。

var obj = {
  name: 'Tom',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

var newObj = Object.create(obj);

newObj.name = 'Jerry';
newObj.sayHello();      //输出 "Hello, Jerry"

寄生式继承

寄生式继承是在原型式继承的基础上，在新创建的对象上增强属性和方法，然后再返回这个新的对象。这种技巧常常用来封装继承的过程，以便于复用。

function createObj(obj) {
  var clone = Object.create(obj);
  clone.sayHi = function() {
    console.log('Hi, ' + this.name);
  };
  return clone;
}

var obj = {
  name: 'Tom',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

var newObj = createObj(obj);
newObj.name = 'Jerry';
newObj.sayHello();     //输出 "Hello, Jerry"
newObj.sayHi();        //输出 "Hi, Jerry"

寄生组合式继承

寄生式组合继承，是组合继承的一种优化写法，它采用了在父类实例的基础上，再用子类的原型覆盖一部分父类的原型（继承父类的共有属性和方法），这样既保留了传统继承的优点，避免了多次调用父类构造函数造成的性能浪费，也修复了组合继承覆盖原型的缺点。这种实现方式是目前继承方案中最为常用的方式。

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

Parent.prototype.sayHello = function() {
  console.log("Hello, " + this.parentName);
}

function Child(name) {
  Parent.call(this, name);
  this.childName = 'Jerry';
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

Child.prototype.sayHi = function() {
  console.log("Hi, " + this.childName);
}

var child = new Child('Tom');
child.sayHello();     //输出 "Hello, Tom"
child.sayHi();        //输出 "Hi, Jerry"

以上就是JavaScript面向对象编程中继承的详细介绍，包括6种常见实现方式。在实际开发中，应根据具体需求选择适合的继承方式来完成开发任务。