1. 程式人生 > >JavaScript各種繼承方式(四):原型式繼承

JavaScript各種繼承方式(四):原型式繼承

 

一 原理

 

利用工具函式,通過原型物件直接得到子類的例項。

 

function inherit(obj){
    // 在閉包中建立子類,對外隱藏子類
    function Temp(){

    }
    Temp.prototype = obj;
    // 直接返回子類的例項
    return new Temp();
}

let fruit = {
    name:'水果',
    nutrition:['維生素']
};

let mango1 = inherit(fruit);
let mango2 = inherit(fruit);

mango1.nutrition.push(
'膳食纖維'); mango2.nutrition.push('檸檬酸'); console.log(mango1.nutrition); // ["維生素", "膳食纖維", "檸檬酸"] console.log(mango2.nutrition); // ["維生素", "膳食纖維", "檸檬酸"]

 

二 優點

 

不涉及父類的建構函式,不呼叫父類的建構函式就能實現繼承。

 

三 缺點

 

本質上還是原型鏈繼承,只是通過工具函式進行了封裝,仍然存在子類的例項共享原型物件的問題。

 

四 簡化

 

ECMAScript 5提供了Object.create()方法,可以用做工具函式。

 

let fruit = {
    name:'水果',
    nutrition:['維生素']
};

let mango1 = Object.create(fruit);
let mango2 = Object.create(fruit);

mango1.nutrition.push('膳食纖維');
mango2.nutrition.push('檸檬酸');
console.log(mango1.nutrition); // ["維生素", "膳食纖維", "檸檬酸"]
console.log(mango2.nutrition); // ["維生素", "膳食纖維", "檸檬酸"]