JS—继承

作者: Miss____Du | 来源:发表于2014-12-08 20:46 被阅读311次

    js实现继承主要是通过原型链实现的。

    • 那么问题来了?什么是原型链?
      基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
      已知,每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。
      原型链是让原型对象等于另一个类型的实例,则此时的原型对象将包含一个指向另一个原型的指针,相应的另一个原型又是另一个类型的实例,层层递进,最终指向某个构造函数。折旧构成了实例与原型与构造函数的链条,即所谓原型链的概念。
      function SuperType(){
      this.superProperty=true;
      }

           SuperType.prototype.getSuperValue=function(){
                return this.superProperty;
            };
            function SubType(){
                this.subProperty=false;
            }
            SubType.prototype=new SuperType();//原型继承了实例
            SubType.prototype.getSubValue=function(){
                return this.subProperty;
            }
            var instance=new SubType();
            alert(instance.getSuperValue());//true
      
    2014-12-08_193432.png
    上图是上段代码的一个关系图,发现,SubType在继承SuperType原型之后,又为原型新添加了属性与方法。而且,为其原型指向一个实例对象,实际上是新建了原型,即割断了原型与构造函数之间的关联,导致subtype的构造函数最终指向其继承的原型对象的构造函数。
    instance.getSuperValue()】其搜索过程会沿着原型链继续向上,这句代码会经历三个搜索步骤:1)搜索实例2)搜索SubType.prototype;3)搜索SuperType.prototype,最后一步才会找到该方法。
    原型链也是认同“当在原型链前端就找到该属性或方法会屏蔽原型链后的同名方法或属性”
    当然我们也不要忘记了Object。因为所有引用类型都是继承原型对象最初都是集成的这个对象的实例。所以所有引用类型的实例也都具备object原型内的属性与方法。
    • 单独使用原型链的问题
    • 【问题1】
      给原型添加方法的代码一定要放在替换原型之后。否则?呵呵,就白添加了,被替换了。
    • 通过原型来实现继承时,原型实际上会变成另一个类型的实例,于是,原先实例中的实例属性this.superProperty=true;也就顺理成章的变成了原型属性了。就被共享了,违背了我们希望构造函数内的实例属性不要被共享的初衷。
    • 在创建子类型实例时,不能像超类型的构造函数中传递参数。实现个性化的定制。
    • 解决办法
    • 借用构造函数——在子类型构造函数的内部调用超类型的构造函数
      //借用构造函数
      function SuperType(name){
      this.name=name;
      this.sayName=function(){
      alert(this.name);
      }
      }
      function SubType(name){
      //借用超类的构造函数
      SuperType.call(this,name);
      this.age=22;
      }
      var instance=new SubType("dudu");
      alert(instance.name);//dudu
      【问题】无法实现构造函数内部的方法sayName()共享。
    • 组合继承——使用原型链实现对原型属性的继承,通过使用构造函数来实现对实例属性的继承
      //组合继承
      function SuperType(name){
      this.name=name;
      }
      SuperType.prototype.sayName=function(){
      alert(this.name);
      }
      function SubType(name){
      //第二次调用超类构造函数
      SuperType.call(this,name);
      this.age=22;
      }
      //第一次调用超类构造函数
      SubType.prototype=new SuperType();
      SubType.prototype.constructor=SubType;
      var instance=new SubType("dudu");
      instance.sayName();//dudu
      【问题】调用两次超类的构造函数,造成构造函数内部属性this.name=name;的重写,第一次为subytpe的原型添加属性name,第二次在为subType的原型绑定构造函数指向,否则指向supertype。。
    • 寄生组合式继承——程序员推荐
      function SuperType(name){
      this.name=name;
      }
      SuperType.prototype.sayName=function(){
      alert(this.name);
      }
      function SubType(name){
      SuperType.call(this,name);
      this.age=22;
      }
      function inheritPrototype(subtype,supertype){
      var prototype=supertype.prototype;//创建原型对象,
      //这个地方现在是浅拷贝,建议替换成深拷贝,否则会将supertype的原型指向的构造函数也变为subtype,
      //方法,可以使用jq的extend 也可以使用 es6的Object.assign({},supertype.prototype)
      prototype.constructor=subtype;//增强对象
      subtype.prototype=prototype;//指定对象
      }//完成仅对超类原型对象的复制。
      inheritPrototype(SubType,SuperType);
      var instance=new SubType("dudu");
      instance.sayName();//dudu

    相关文章

      网友评论

        本文标题:JS—继承

        本文链接:https://www.haomeiwen.com/subject/ysrntttx.html