JavaScript面向对象继承的三种实现方式解析

本文通过具体实例详细介绍JavaScript面向对象程序设计中的继承用法，供读者参考学习。

1. 关于继承的概念

根据百度百科的定义，继承是指一个对象可以直接使用另一个对象的属性和方法。

（注：百科对计算机概念中继承的解释较为简略）

继承的优势和好处，学过面向对象编程的同学应当已经了解，此处不再赘述。

在JavaScript中，继承主要包含以下三种形式（不同书籍对这三种方式的命名可能有所不同，此处按个人理解进行命名）：

• a. 构造函数继承（也称为类式继承、组合继承或伪经典继承）
• b. 原型继承
• c. 原型赋值（遍历）继承（也称为寄生式继承）

2. 构造函数继承

所谓的构造函数继承，是指通过创建一个新对象并调用父类构造函数来实现继承的一种方式。 （知识点补充：函数对象的原型中有一个名为constructor的属性，该属性实际指向的是这个函数本身）

function person(name){
  this.name = name;
}
extend(author, person);
function extend(subclass, superclass){
 var f= function(){};
 f.prototype = superclass.prototype;//f.prototype.constructor = superclass
 subclass.prototype = new f();//这里调用的实际上是superclass()，这样subclass.prototype.construcor = superclass
 subclass.prototype.constructor = subclass;//将subclass的构造函数改写为正常的自身的构造函数
}

3. 原型式继承

我们知道，当JavaScript引用一个对象的属性时，首先会检查该对象自身是否拥有此属性；如果没有，则继续查找该对象的原型中是否存在此属性。

var person ={}
var author = clone(person);
function clone(obj){
 function F(){};
 F.prototype = obj;
 return new F;
}

clone函数的作用是将父类的所有成员赋予新对象的prototype，使其成为新对象原型链上的成员。因此，当子类引用父类属性时，都能在prototype中找到。然而，这种继承方式导致所有克隆出来的对象共享每个属性和方法的唯一实例（因为都是通过原型读取）。只有当直接设置了某个克隆对象的属性和方法（使其变为对象独立属性）时，情况才会发生变化。

4. 原型赋值（遍历）继承

这种赋值方式相比单纯的原型赋值，其优势在于能够控制继承的范围。

var person = {};
augment(author, person);

//参数最少两个，超过两个则表示指定要继承的成员
function augment(receivingclass, givingclass){
  if(arguments[2]){
   for(var i=2;i<arguments.length;i++){
    receivingclass.prototype[arguments[i]] = givingclass.prototype[arguments[i]];
   }
  }
  else{
   for(methodname in givingclass.prototype){
    receivingclass.prototype[methodname] = givingclass.prototype[methodname];
   }
  }
}

这种方式更适用于通过var obj定义的对象，而非通过函数定义的对象。如果使用函数定义对象且同时需要指定继承的成员，别忘了处理constructor属性。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码的运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述内容对大家学习JavaScript程序设计有所帮助。