js 继承模式篇

JS 继承模式

继承发展史

• 传统形式 ---- 原型链

  缺点：

  ​ 过多的继承了没用的东西。不太实用。

• 借用构造函数

  例如使用 call ( ) / apply ( ) 设置this的指向，来达到借用其他构造函数中的方法的目的。形似继承，实则不是

  缺点：

  ​ 不能继承借用的构造函数的原型

  ​ 每次构造函数都要多执行函数，因为使用call/apply时，被借用的构造函数也会执行。

• 共有原型

  Father.prototype.lastName = "deng";
  function Father() {}
  function Son() {}
  Son.prototype = Father.prototype;
  var son = new Son();
  

  封装该功能

  Father.prototype.lastName = "deng";
  function Father() {}
  function Son() {}
  function inherit(Target, Origin ){
      Target.prototype = origin.prototype;
  }
  inherit(Son, Father);
  var son = new Son();
  

  缺点：

  ​ 如上，一但改动Son.prototype，Father.prototype也会一起改变，Son无法实现独特的属性。

• 圣杯模式

  在共有原型的基础上，加一个中间层，function F( ){ }，Son( ) 的原型等于new F( ) 对象，Father( ) 的原型等于 F ( ) 的原型，这样在修改 Son( ) 的原型时，只会影响到new F( ) 对象而不会影响到 F( ) 的原型，也就不会影响到 Father( ) 的原型，但是如果修改 Father( ) 的原型，Son( ) 是能继承到的。
  

  //圣杯模式
  function inherit(Target, Origin ){
      function F (){}
      F.prototype = Origin.prototype;
      //注意new之前必须先改了原型，new之后改原型就迟了
      Target.prototype = new F();
      //修改son()的constuctor为自身，而不是Father()
      Target.prototype.constuctor = Target;
      //超类，定义它真正继承自谁
      Target.prototype.uber = Origin.prototype;
  }
  
  
  Father.prototype.lastName = "deng";
  function Father() {}
  function Son() {}
  inherit(Son, Father);
  var son = new Son();
  var father = new Father();
  

  

雅虎曾经的YUI3库封装的一个功能

闭包：实现封装，属性私有化。

var inherit = (function(){
    var F = function(){};
    return function(Target, Origin){
        F.prototype = Origin.prototype;
        Target.prototype = new F();
        Target.prototype.constuctor = Target;
        Target.prototype.uber = Origin.prototype;
    }
}());

constuctor = Target;
        Target.prototype.uber = Origin.prototype;
    }
}());