JavaScript实现继承的方式优化

组合继承

将原型链和借用构造函数的技术组合在一块，从而发挥两者之长的一种继承模式。

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 = new Parent();
var parent = new Parent('myparent');
var child = new Child('mychild');
console.log(parent.getName());  //myparent
console.log(child.getName());  //mychild

上面这种方法在子类构造函数中通过apply调用父类的构造函数来进行相同的初始化工作，这样不管父类中做了多少初始化工作，子类也可以执行同样的初始化工作。但是上面这种实现还存在一个问题， 父类构造函数被执行了两次，一次是在子类构造函数中，一次在赋值子类原型时Child.prototype = new Parent() ;，这是很多余的，所以我们还需要做一个改进：

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
 
 

  
  
 
 

很容易可以看出，通过在父类原型和子类原型之间加入一个临时的构造函数F，切断了子类原型和父类原型之间的联系，这样当子类原型做修改时就不会影响到父类原型。

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

递归拷贝式继承

function deepClone(initalObj,finalObj){
  var obj = finalObj || {};
  for(var i in initalObj){       //逐个取对象的属性
    if(initalObj.hasOwnProperty(i)){   //判断不是通过原型链继承的属性
      if(typeof initalObj[i] === 'object'){    //属性对应的value是object（这里可能是数组）      
        obj[i] = (initalObj[i].constructor === Array) ? [] : {};  //typeof数组出来的也是“object”，可以用.constructor来判断是否为数组
        arguments.callee(initalObj[i],obj[i]);
      }else{
        obj[i] = initalObj[i];
      }
    }
  }
  return obj;
}
var str = {};
var obj = {a: {a: 'hello',b: 21}};
deepClone(obj,str);
console.log(str.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) ;
} ;
Child.prototype = deepClone(Parent.prototype) ;
Child.prototype.constructor = Child ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild