JavaScript使用原型和原型链实现对象继承的方法详解

本文实例讲述了javascript使用原型和原型链实现对象继承的方法。分享给大家供大家参考，具体如下：

实际上javascript并不是一门面向对象的语言，不过javascript基于原型链的继承方式、函数式语法，使得编程相当灵活，所以可以利用原型链来实现面向对象的编程。

之前对javascript一直都是一知半解，这两天看了一下原型链这一块知识，综合练习了一下javascript的对象继承方式。

以下就是原型链和原型的关系，引用网上的一张图

在javascript中，每个函数都有一个原型属性prototype指向自身的原型，而由这个函数创建的对象也有一个proto属性指向这个原型，而函数的原型是一个对象，所以这个对象也会有一个proto指向自己的原型，这样逐层深入直到object对象的原型，这样就形成了原型链。

- 基本继承模式

function fatherclass() {
  this.type = 'father';
}
fatherclass.prototype.gettyep = function() {
  console.log(this.type);
}
fatherclass.prototype.obj = {age: 35};
function childclass() {
  this.type = 'child';
}
childclass.prototype = fatherclass();
childclass.prototype.gettype = function() {
  console.log(this.type);
}
var father = new fatherclass();
var child = new childclass();
father.gettyep();
child.gettype();

此方法有优点也有缺点，继承的实现很简单，代码简单容易理解，但是子类继承父类的成员变量需要自己重新初始化，相当于父类有多少个成员变量，在子类中还需要重新定义及初始化

function fatherclass(type) {
  this.type = type || 'father';
}
function childclass(type) {
  this.type = type || 'child';
}
childclass.prototype = fatherclass();
childclass.prototype.gettype = function() {
  console.log(this.type);
}
var father = new fatherclass('fatclass');
var child = new childclass('chilclass');

上面这种情况还只是需要初始化name属性，如果初始化工作不断增加，这种方式是很不方便的。因此就有了下面一种改进的方式。

- 借用构造函数

var parent = function(name){
  this.name = name || 'parent' ;
} ;
parent.prototype.getname = function(){
  return this.name ;
} ;
parent.prototype.obj = {a : 1} ;
var child = function(name){
  parent.apply(this,arguments) ;
} ;
child.prototype = parent.prototype ;
var parent = new parent('myparent') ;
var child = new child('mychild') ;
console.log(parent.getname()) ; //myparent
console.log(child.getname()) ; //mychild

这样我们就只需要在子类构造函数中执行一次父类的构造函数，同时又可以继承父类原型中的属性，这也比较符合原型的初衷，就是把需要复用的内容放在原型中，我们也只是继承了原型中可复用的内容。

- 临时构造函数模式(圣杯模式)

上面借用构造函数模式最后改进的版本还是存在问题，它把父类的原型直接赋值给子类的原型，这就会造成一个问题，就是如果对子类的原型做了修改，那么这个修改同时也会影响到父类的原型，进而影响父类对象，这个肯定不是大家所希望看到的。为了解决这个问题就有了临时构造函数模式。

var parent = function(name){
  this.name = name || 'parent' ;
} ;
parent.prototype.getname = function(){
  return this.name ;
} ;
parent.prototype.obj = {a : 1} ;
var child = function(name){
  parent.apply(this,arguments) ;
} ;
var f = new function(){} ;
f.prototype = parent.prototype ;
child.prototype = new f() ;
var parent = new parent('myparent') ;
var child = new child('mychild') ;
console.log(parent.getname()) ; //myparent
console.log(child.getname()) ; //mychild

个人综合模式

《javascript模式》中到圣杯模式就结束了，可是不管上面哪一种方法都有一个不容易被发现的问题。大家可以看到我在'parent'的prototype属性中加入了一个obj对象字面量属性，但是一直都没有用。我们在圣杯模式的基础上来看看下面这种情况：

var parent = function(name){
  this.name = name || 'parent' ;
} ;
parent.prototype.getname = function(){
  return this.name ;
} ;
parent.prototype.obj = {a : 1} ;
var child = function(name){
  parent.apply(this,arguments) ;
} ;
var f = new function(){} ;
f.prototype = parent.prototype ;
child.prototype = new f() ;
var parent = new parent('myparent') ;
var child = new child('mychild') ;
console.log(child.obj.a) ; //1
console.log(parent.obj.a) ; //1
child.obj.a = 2 ;
console.log(child.obj.a) ; //2
console.log(parent.obj.a) ; //2

在上面这种情况中，当我修改child对象obj.a的时候，同时父类的原型中的obj.a也会被修改，这就发生了和共享原型同样的问题。出现这个情况是因为当访问child.obj.a的时候，我们会沿着原型链一直找到父类的prototype中，然后找到了obj属性，然后对obj.a进行修改。再看看下面这种情况：

var parent = function(name){
  this.name = name || 'parent' ;
} ;
parent.prototype.getname = function(){
  return this.name ;
} ;
parent.prototype.obj = {a : 1} ;
var child = function(name){
  parent.apply(this,arguments) ;
} ;
var f = new function(){} ;
f.prototype = parent.prototype ;
child.prototype = new f() ;
var parent = new parent('myparent') ;
var child = new child('mychild') ;
console.log(child.obj.a) ; //1
console.log(parent.obj.a) ; //1
child.obj.a = 2 ;
console.log(child.obj.a) ; //2
console.log(parent.obj.a) ; //2

这里有一个关键的问题，当对象访问原型中的属性时，原型中的属性对于对象来说是只读的，也就是说child对象可以读取obj对象，但是无法修改原型中obj对象引用，所以当child修改obj的时候并不会对原型中的obj产生影响，它只是在自身对象添加了一个obj属性，覆盖了父类原型中的obj属性。而当child对象修改obj.a时，它先读取了原型中obj的引用，这时候child.obj和parent.prototype.obj是指向同一个对象的，所以child对obj.a的修改会影响到parent.prototype.obj.a的值，进而影响父类的对象。angularjs中关于$scope嵌套的继承方式就是模范javasript中的原型继承来实现的。

根据上面的描述，只要子类对象中访问到的原型跟父类原型是同一个对象，那么就会出现上面这种情况，所以我们可以对父类原型进行拷贝然后再赋值给子类原型，这样当子类修改原型中的属性时就只是修改父类原型的一个拷贝，并不会影响到父类原型。具体实现如下：

var deepclone = function(source,target){
  source = source || {} ;
  target = target || {};
  var tostr = object.prototype.tostring ,
    arrstr = '[object array]' ;
  for(var i in source){
    if(source.hasownproperty(i)){
      var item = source[i] ;
      if(typeof item === 'object'){
        target[i] = (tostr.apply(item).tolowercase() === arrstr) ? [] : {} ;
        deepclone(item,target[i]) ;
      }else{
        target[i] = item;
      }
    }
  }
  return target ;
} ;
var parent = function(name){
  this.name = name || 'parent' ;
} ;
parent.prototype.getname = function(){
  return this.name ;
} ;
parent.prototype.obj = {a : '1'} ;
var child = function(name){
  parent.apply(this,arguments) ;
} ;
child.prototype = deepclone(parent.prototype) ;
var child = new child('child') ;
var parent = new parent('parent') ;
console.log(child.obj.a) ; //1
console.log(parent.obj.a) ; //1
child.obj.a = '2' ;
console.log(child.obj.a) ; //2
console.log(parent.obj.a) ; //1

综合上面所有的考虑，javascript继承的具体实现如下，这里只考虑了child和parent都是函数的情况下：

var deepclone = function(source,target){
  source = source || {} ;
  target = target || {};
  var tostr = object.prototype.tostring ,
    arrstr = '[object array]' ;
  for(var i in source){
    if(source.hasownproperty(i)){
      var item = source[i] ;
      if(typeof item === 'object'){
        target[i] = (tostr.apply(item).tolowercase() === arrstr) ? [] : {} ;
        deepclone(item,target[i]) ;
      }else{
        target[i] = item;
      }
    }
  }
  return target ;
} ;
var extend = function(parent,child){
  child = child || function(){} ;
  if(parent === undefined)
    return child ;
  //借用父类构造函数
  child = function(){
    parent.apply(this,argument) ;
  } ;
  //通过深拷贝继承父类原型
  child.prototype = deepclone(parent.prototype) ;
  //重置constructor属性
  child.prototype.constructor = child ;
} ;

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

希望本文所述对大家javascript程序设计有所帮助。