《javascript高级程序设计》 继承实现方式

catchonme

这篇本来应该是作为写JS 面向对象的前奏,只是作为《javascript高级程序设计》继承一章的笔记

  • 原型链

    • code 实现

      function SuperType() {
        this.colors = ['red','blue', 'green'];
      }
      function SubType() {
      }
      SubType.prototype = new SuperType();
      var instance1 = new SubType();
      instance1.colors.push("black");
      console.log(instance1.colors); // ['red','blue', 'green','black']
      
      var instance2 = new SubType();
      console.log(instance2.colors); // ['red','blue', 'green','black']
      
      var instance = new SuperType();
      console.log(instance.colors); // ['red','blue', 'green']
    • 使用原型链来实现继承,原型实际上会变成另一个类型的实例,于是,原先的实例属性,会变成现在的原型属性了
    • 在创建子类的实例时,不能向父类的构造函数中传递参数
  • 借用构造函数

    • code 实现继承

      function SuperType() {
        this.colors = ["red","blue","green"];
      }
      function SubType() {
        SuperType.call(this);
      }
      
      var instance1 = new SubType();
      instance1.colors.push("black");
      console.log(instance1.colors); // ["red", "blue", "green", "black"]
      
      var instance2 = new SubType();
      console.log(instance2.colors); // ["red", "blue", "green"]
      
      var instance = new SuperType();
      console.log(instance.colors); // ['red','blue', 'green']

    同样也可以实现参数的传递

    function SuperType(name) {
      this.name = name;
    }
    function SubType(){
      SuperType.call(this, "jack");
      this.age = 29;
    }
    
    var instance = new SubType();
    console.log(instance.name); // jack
    console.log(instance.age); // 29
    • 如果仅仅是借用构造函数,那么将无法避免构造函数模式存在的问题--方法都在构造函数中定义,因此,函数复用也就无从谈起了。而且,在超类型的原型中定义的方法,对子类而言也是不可见的,结果所有类型都只能使用构造函数模式。
  • 组合继承

    • 将原型链和借用构造函数的技术组合到一块,从而发回二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,即通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。
    • code 实现

      function SuperType(name) {
        this.name = name;
        this.colors = ['red','blue','green'];
      }
      SuperType.prototype.sayName = function() {
        console.log(this.name);
      };
      function SubType(name, age) {
        SuperType.call(this, name);
        this.age = age;
      };
      
      SubType.prototype = new SuperType();
      SubType.prototype.sayAge = function(){
        console.log(this.age);
      };
      
      var instance1 = new SubType("jack", 29);
      instance1.colors.push("black");
      console.log(instance1.colors); //["red", "blue", "green", "black"]
      instance1.sayName(); // jack
      instance1.sayAge(); // 29
      
      var instance2 = new SubType("allen", 23);
      console.log(instance2.colors); // ["red", "blue", "green"]
      instance2.sayName(); //allen
      instance2.sayAge(); // 23
    • instanceOfisPrototypeOf 也能够用于识别基于组合继承创建的对象
  • 原型式继承

    • 没有严格意义上的构造函数,通过借助原型,可以基于已有的对象创建新对象,同时还不必因此创建自定义类型

      function object(o){
        function F(){};
        F.prototype = o;
        return new F();
      }

    object() 函数内部,先创建了一个临时性的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回这个临时类型的一个新实例。从本质上将,object() 对传入其中的对象执行了一次浅复制

    function object(o) {
        function F() {};
        F.prototype = o;
        return new F();
    }
    
    var person = {
        name:'jack',
        friends:['allen','lucy','van']
    }
    
    var anotherPerson = object(person);
    anotherPerson.name = 'bob';
    anotherPerson.friends.push('steve');
    
    var yetAnotherPerson = object(person);
    yetAnotherPerson.name = 'linda';
    yetAnotherPerson.friends.push('shelly')
    
    console.log(person.friends); //["allen", "lucy", "van", "steve", "shelly"]

    这种原型式继承,要求你必须有一个对象可以作为另一个对象的基础。如果有这么一个对象的话,可以把他传递给object() 函数,然后再根据具体需求对得到的对象加以修饰即可。

    ECMAScript5 通过Object.create() 方法规范花了原型式继承。这个方法接受两个参数:一个用作新对象原型的对象和(可选的)一个为新对象定义额外属性的对象。在传入一个参数的情况下,Object,create()object() 函数方法的行为相同

    在没有必要创建构造函数,而只是想让一个对象与另一个对象保持类似的情况下,原型式继承是完全可以胜任的。不过,包含引用类型值的属性始终都会共享响应的值,就像使用原型模式一样

  • 寄生式继承

    • 寄生式继承是与原型式继承紧密相关的一种思路。寄生式继承的思路与寄生构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数,该函数在内部已某种方式来增强对象,最后再像真的是它做了所有工作一样返回对象。

      function createAnother(original){
        var clone = object(original); // 通过调用 object() 函数创建一个新对象
        clone.sayHi = function(){  // 以某种方式来增强对象
          alert("hi");
        };
        return clone; // 返回这个对象
      }
    • 在主要考虑对象而不是自定义类型和构造函数的情况下,寄生式继承也是一种有用的模式。前面示范继承模式时使用的object() 函数不是必需的;任何能够返回新对象的函数都使用与此模式。
  • 寄生组合式继承

    • 组合继承是JavaScript 最常用的继承模式;不过也有自己的不足。组合继承最大的问题就是无论什么情况下,都会调用两次父类的构造函数:一次是在创建子类原型的时候,另一次是在子类构造函数内部。

    子类最终会包含父类对象的全部实例属性,但我们不得不在调用子类构造函数时重写这些属性。

    function SuperType(name) {
        this.name = name;
        this.colors = ['red','blue','green'];
    }
    
    SuperType.prototype.sayName = function(){
        console.log(this.name);
    }
    
    function SubType(name, age) {
        SuperType.call(this, name); // 第二次调用 SuperType()
        this.age = age;
    }
    
    SubType.prototype = new SuperType(); // 第一次调用 SuperType()
    SubType.prototype.constructor = SubType;
    SubType.prototype.sayAge = function() {
        console.log(this.age);
    };

    第一次调用SuperType 构造函数时,SubType.prototype会得到两个属性:namecolors,他们都是SuperType 的实例属性,只不过现在位于SubType 的原型中。当调用SubType 构造函数时,又会调用一次SuperType 构造函数,这一次又在新对象上创建了实例属性namecolors。 于是,这两个属性就屏蔽了原型中的两个同名属性。

    所谓寄生组合式继承,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。其背后的基本思路是:不必为了指定子类的原型而调用父类的构造函数,我们所需要的无非就是父类原型的一个副本而已。本质上,就是使用寄生式继承来继承父类型的原型,然后再将结果指定给子类的原型。寄生组合式继承的基本模式如下

    function inheritPrototype(subType, superType) {
      var prototype = object(superType.prototype);
      prototype.constructor = subType;
      subType.prototype = prototype;
    }

    第一步是创建父类原型的一个副本,第二步是为创建的副本添加constructor 属性,从而弥补因重写原型而失去的默认的constructor 属性。第三步是将新创建的对象(即副本)赋值给子类的原型。

    function SuperType(name) {
        this.name = name;
        this.colors = ['red','blue','green'];
    }
    
    SuperType.prototype.sayName = function(){
        console.log(this.name);
    }
    
    function SubType(name, age) {
        SuperType.call(this, name); // 第二次调用 SuperType()
        this.age = age;
    }
    
    inheritPrototype(SubType, SuperType)
    SubType.prototype.sayAge = function() {
        console.log(this.age);
    };

    这个例子的高效率体现在它只调用了一次SuperType 构造函数,并且因此避免了在SubType.prototype 上创建不必要的、多余的属性。于此同时,原型链还能保持不变;因此,还能够正常使用instanceofisPrototypeOf() 。开发人员普遍认为寄生组合继承是引用类型最理想的继承范式。

优缺点

  • 原型链会修改父类的属性,在创建子类的实例时,不能向父类的构造函数中传递参数
  • 借用构造函数,则没有继承
  • 组合继承(原型继承+借用构造函数) 组合继承最大的问题就是无论什么情况下,都会调用两次父类的构造函数:一次是在创建子类原型的时候,另一次是在子类构造函数内部。
  • 原型式继承,要求你必须有一个对象可以作为另一个对象的基础,
    包含引用类型值的属性始终都会共享响应的值,就像使用原型模式一样
  • 寄生式继承
    在主要考虑对象而不是自定义类型和构造函数的情况下,寄生式继承也是一种有用的模式
  • 寄生组合式继承 (这是最成熟的方法,也是现在库实现的方法)
    第一步是创建父类原型的一个副本,第二步是为创建的副本添加constructor 属性,从而弥补因重写原型而失去的默认的constructor 属性。第三步是将新创建的对象(即副本)赋值给子类的原型。


JS面向对象系列

阅读 2k

大航海时代
日常的总结文章

请回答2017

144 声望
8 粉丝
0 条评论

请回答2017

144 声望
8 粉丝
文章目录
宣传栏