Prototype相关 创建对象 和 继承

[5Mi]

Prototype相关 创建对象 和 继承 ,__proto__啥的时间一长就忘差不多 回顾复习一下 参考自 javascript高级程序设计

组合使用构造函数模式 和 原型模式 创建对象

• 构造函数

    function person(name){
        this.name = name;
    }
    //实例拥有自己的属性和方法

• 构造函数 的 原型对象

    person.prototype={
        constructor:person,
        sayName : function(){
            alert(this.name); 
        }
    }
    //实例都共享的属性和方法

• 实例

    let personObj = new person();
    personObj.__proto__ === person.prototype;
    //实例的内部将包含一个指针(内部 属性),指向构造函数的原型对象

继承

• 组合继承

    //父构造函数
    function parentType(name){
        this.name = name;
    }
    //父构造函数的原型对象
    parentType.prototype.sayName = function(){alert(this.name)}
    //子构造函数 继承 
    function childType(name,age){
        //继承属性 
        parentType.call(this,name); //第二次调用parentType()
        this.age = age;
        //实例内部的属性和方法
    }
    //继承
    childType.prototype = new parentType(); //第一次调用parentType()
    childType.prototype.constructor = childType;
    //子实例共享的属性和方法
    childType.prototype.sayAge = function(){
        alert(this.age); 
    };

    //实例
    var instance1 = new childType("Nicholas", 29);
    instance1.sayName(); //"Nicholas";
    instance1.sayAge(); //29

在第一次调用 parentType 构造函数时, childType.prototype 会得到属性:name;它是 parentType 的实例属性,只不过 现在位于 childType 的原型中。当调用 childType 构造函数时,又会调用一次 parentType 构造函数,这 一次又在新对象上创建了实例属性 name 于是,这两个name属性就屏蔽了原型中的同名属 性 (造成资源浪费的弊端)

• 寄生组合式继承

  不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型 原型的一个 副本 而已。本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型 的原型

    function inheritPrototype(subType, superType){ 
        var prototype = object(superType.prototype); //创建对象副本 且使用superType.prototype 只含有superType.prototype的属性和方法
        prototype.constructor = subType; //增强对象
        subType.prototype = prototype; //指定对象
    }

这个示例中的 inheritPrototype()函数实现了寄生组合式继承的最简单形式。这个函数接收两 个参数:子类型构造函数和超类型构造函数。在函数内部,第一步是 创建超类型原型的一个副本。 第二 步是为创建的副本添加 constructor 属性,从而弥补因重写原型而失去的默认的 constructor 属性。 最后一步, 将新创建的对象(即副本)赋值给子类型的原型。 这样, 我们就可以用调用 inherit- Prototype()函数的语句,去替换前面例子中为子类型原型赋值的语句了,例如:

function SuperType(name){ 
        this.name = name; 
        this.colors = ["red", "blue", "green"]; 
    }

SuperType.prototype.sayName = function(){
        alert(this.name);
    };

function SubType(name, age){ 
        SuperType.call(this, name);
        this.age = age;
    }

inheritPrototype(SubType, SuperType);
//使用inheritPrototype方法则不必再进行之前类似以下步骤
//childType.prototype = new parentType();
//第一次调用parentType()
//childType.prototype.constructor = childType;

//因此 SubType(SubType的构造函数) 继承了 SuperType的属性和方法
//SubType.prototype(SubType构造函数的原型) 继承了SuperType.prototype 的 属性和方法
//不会再出现 实例内部 和 构造函数的原型内部 出现同一属性的情况,避免了资源浪费

SubType.prototype.sayAge = function(){
        alert(this.age);
    };