Javascript继承6:终极继承者----寄生组合式继承

Posted 九转功成

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript继承6:终极继承者----寄生组合式继承相关的知识,希望对你有一定的参考价值。

/*
* 寄生式继承依托于原型继承,原型继承又与类式继承想象。
* 即: 原型与构造函数的组合继承
* 寄生式继承  继承原型
* 传递参数 childClass 子类
* 传递参数 parentClass 父类
*/

//原型式继承
function inheritObj(obj){
    //声明一个过渡函数对象
    function F(){}
    //过渡对象的原型继承父对象
    F.prototype = obj;
    //返回过渡对象的一个实例,该实例的原型继承了父对象
    return new F();
}

function inheritPrototype(childClass,parentClass){
    //复制一份父类原型副本保存在变量中
    var p = inheritObj(parentClass.prototype);
    //修正因为重写子类原型导致子类的constructor属性被修改
    p.constructor = childClass;
    //设置子类原型
    childClass.prototype = p;
}

// 定义父类
function ParentClass(name){
    this.name = name;
    this.books = [‘html];
}
//定义父类原型方法
ParentClass.prototype.getName = function(){
    console.log(this.name);
}
//定义子类
function ChildClass(name,time){
    //构造函数是继承
    ParentClass.call(this,name);
    //子类新增属性
    this.time = time;
}

// 寄生式继承父类原型
inheritPrototype(ChildClass,ParentClass);
//子类新增方法
ChildClass.prototype.getTime = function(){
    console.log(this.time);
}
// test
var child1 = new ChildClass(‘react‘,2018);
var child2 = new ChildClass(‘vue‘,2017);

child1.books.push(‘css‘);

console.log(child1.books)     // [‘Html‘,‘css‘]
console.log(child2.books)     // [‘html‘]

child2.getName()              // Vue
child2.getTime()              // 2017

设计模式中的经典笔录

以上是关于Javascript继承6:终极继承者----寄生组合式继承的主要内容,如果未能解决你的问题,请参考以下文章

javascript继承笔记

爱创课堂每日一题第五十九天- javascript继承的6种方法

JavaScript继承基础讲解,原型链借用构造函数混合模式原型式继承寄生式继承寄生组合式继承

JavaScript ----------------- 寄生式继承

JavaScript对象的继承

Javascript继承5:如虎添翼----寄生式继承