JavaScript实现继承的多种模式详解

JavaScript继承概述

“继承”是面向对象编程中实现代码复用的核心概念。由于JavaScript早期版本中不存在“类”的概念，其继承机制与传统的面向对象语言有所不同，主要依赖于原型链来实现。

需要注意的是，ES6引入了关键字class和extend，使得继承语法看起来与Java等语言相似。然而，ES6中的class本质上只是JavaScript原型继承的语法糖，底层原理并未改变。

类式继承的四种实现

1. 类式继承

该类式继承的核心在于通过构造函数来建立父子关系。

首先定义父类：

function Parent(name) {
 this.name = name || "parent";
}
Parent.prototype.say = function() {
 return this.name;
}

接着定义子类：

function Child() {}

(1) 父类对象继承

Child.prototype = new Parent("child");

var child = new Child();
child.say(); // "child"

这种继承模式的特点是，子类不仅继承了父类原型上的方法或属性，还继承了父类构造函数中定义的自身属性。

然而，该模式存在明显缺陷：在将父类实例赋值给子类原型时（Child.prototype = new Parent("child");），父类构造函数的初始化参数是固定的，而这些参数往往并非子类所需，导致灵活性不足。

(2) 借用构造函数

对子类进行如下改造：

function Child(){
 Parent.apply(this, arguments);
}

此模式的特点是，子类仅继承父类构造函数中定义的自身属性。

其缺点同样显著：由于没有建立原型链连接，子类无法从父类原型中继承任何方法或属性。

(3) 共享原型

Child.prototype = Parent.prototype;

这种方式的缺点在于，子类原型与父类原型指向同一个对象。如果子类修改原型，将直接导致父类原型发生变化，影响其他实例。

(4) 临时构造函数

function inherit(Child, Parent) {
 var F = function(){};
 F.prototype = Parent.prototype;
 Child.prototype = new F();
}

该模式利用一个空函数F()作为子类和父类之间的代理。它既能实现父类原型方法和属性的继承，又允许在子类原型上独立扩展新的方法或属性，互不干扰。

通常，我们可以利用ES5提供的新方法Object.create()来实现此类继承，代码如下：

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

属性复制与借用方法

2. 通过复制属性实现继承

属性复制继承主要分为浅拷贝和深拷贝两种策略。

浅拷贝不会递归复制对象类型，而是简单地将对象引用指向子类，实现代码如下：

function extend(parent, child) {
 var key;
 for(key in parent) {
  if (parent.hasOwnProperty(key)){
   child[key] = parent[key];
  }
 }
 return child;
}

深拷贝则会进行深度递归复制。如果某个属性是对象类型，它会复制该对象的所有属性，再赋值给子类，实现代码如下：

function extendDeep(parent, child) {
 var key;
 for(key in parent) {
  if (parent.hasOwnProperty(key)){
   if (typeof parent[key] === 'object') {
    child[key] = (parent[key].toString() === "[object Array]")? []:{};
    extendDeep(parent[key], child[key]);
   } else {
    child[key] = parent[key];
   }
  }
 }
 return child;
}

3. "借用方法"模式复用父类函数

如果不需要实现完整的父子继承，仅希望子类复用父类的部分方法，可以利用apply, call, bind来调用父类函数，实现功能复用。

具体代码如下：

parent.say.call(child, "hello, child!");

小结

综上所述，推荐采用“临时构造函数”模式来实现JavaScript的继承，因为它在保持原型链完整性的同时，避免了共享原型带来的副作用。以上介绍了JavaScript实现继承的多种方式，希望对大家有所帮助。如有任何疑问，欢迎留言交流。感谢支持！