1. 程式人生 > >Javascript繼承6:終極繼承者----寄生組合式繼承

Javascript繼承6:終極繼承者----寄生組合式繼承

ret time 想象 type react 設計 code 傳遞參數 div

/*
* 寄生式繼承依托於原型繼承,原型繼承又與類式繼承想象。
* 即: 原型與構造函數的組合繼承
* 寄生式繼承  繼承原型
* 傳遞參數 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:終極繼承者----寄生組合式繼承