javaScript面向?qū)ο缶幊?繼承（一）

YorkChen 發(fā)布于2019-08-23 12:02 / 2286人閱讀

摘要：組合繼承前面兩種模式的特點(diǎn)類式繼承通過子類的原型對父類實(shí)例化實(shí)現(xiàn)的，構(gòu)造函數(shù)式繼承是通過在子類的構(gòu)造函數(shù)作用環(huán)境中執(zhí)行一次父類的構(gòu)造函數(shù)來實(shí)現(xiàn)的。

類有三部分

構(gòu)造函數(shù)內(nèi)的，供實(shí)例化對象復(fù)制用的

構(gòu)造函數(shù)外的，直接通過點(diǎn)語法添加的，供類使用，實(shí)例化對象訪問不到

類的原型中的，實(shí)例化對象可以通過其原型鏈間接地訪問到，也是供所有實(shí)例化對象所共用的。

類式繼承

類的原型對象的作用就是為類的原型添加共有方法，但類不能訪問這些屬性和方法，只有通過原型prototype來訪問。

//類式繼承
//聲明父類
function SuperClass() {
    this.superValue = true;
}
//為父類添加共有方法
SuperClass.prototype.getSuperValue = function () {
    return this.superValue;
};
//聲明子類
function SubClass() {
    this.subValue = false;
}
//繼承父類
SubClass.prototype = new SuperClass();
//為子類添加共有方法
SubClass.prototype.getSubValue = function () {
    return this.subValue;
};
var instance = new SubClass();
console.log(instance.getSuperValue());//true可以這樣使用子類
console.log(instance.getSubValue());//false
console.log(instance instanceof SuperClass);//true
console.log(instance instanceof SubClass);//true
console.log(SubClass instanceof SuperClass);//false

類式繼承的兩個(gè)缺點(diǎn)：
一、子類通過其原型prototype對父類實(shí)例化，繼承了父類。父類的共有屬性要是引用類型，就會在子類中被所有實(shí)例共用，一個(gè)子類的實(shí)例更改子類原型從父類構(gòu)造函數(shù)中繼承的共有屬性就會直接影響其他子類。
二、由于子類實(shí)現(xiàn)的繼承是靠其原型prototype對父類的實(shí)例化實(shí)現(xiàn)的，因此在創(chuàng)建父類的時(shí)候，無法向父類傳遞參數(shù)，在實(shí)例化父類的時(shí)候也無法對父類構(gòu)造函數(shù)內(nèi)的屬性進(jìn)行初始化。

構(gòu)造函數(shù)繼承

//構(gòu)造函數(shù)式繼承
//聲明父類
function SuperClass(id) {
    //引用類型共有屬性
    this.books = ["javascript","html","css"];
    //值類型共有屬性
    this.id = id;
}
//父類聲明原型方法
SuperClass.prototype.showBooks = function () {
    console.log(this.books);
}
//聲明子類
function SubClass(id) {
    //繼承父類
    SuperClass.call(this,id);//將子類的變量在父類中執(zhí)行一遍
}
//創(chuàng)建第一個(gè)子類實(shí)例
var instance1 = new SubClass(10);
var instance2 = new SubClass(11);
instance1.books.push("設(shè)計(jì)模式");
console.log(instance1.books);//[ "javascript", "html", "css", "設(shè)計(jì)模式" ]
console.log(instance1.id);//10
console.log(instance2.books);//[ "javascript", "html", "css" ]
console.log(instance2.id);//11
instance1.showBooks();//[ "javascript", "html", "css", "設(shè)計(jì)模式" ]

由于這種類型的繼承沒有涉及原型prototype，所有父類的原型方法自然不會被子類繼承，而如果想要被子類繼承就必須放在構(gòu)造函數(shù)中，這樣創(chuàng)建的每個(gè)實(shí)例都會多帶帶擁有一份而不能共用，違背了代碼復(fù)用原則。

組合繼承

前面兩種模式的特點(diǎn)：類式繼承通過子類的原型prototype對父類實(shí)例化實(shí)現(xiàn)的，構(gòu)造函數(shù)式繼承是通過在子類的構(gòu)造函數(shù)作用環(huán)境中執(zhí)行一次父類的構(gòu)造函數(shù)來實(shí)現(xiàn)的。組合繼承同時(shí)做到了這兩點(diǎn)。

//組合式繼承
//聲明父類
function SuperClass(name) {
    //值類型共有屬性
    this.name = name;
    //引用類型共有屬性
    this.books = ["html","css","javaScript"];
}
//父類原型共有方法
SuperClass.prototype.getName = function () {
    console.log(this.name);
}
//聲明子類
function SubClass(name,time) {
    //構(gòu)造函數(shù)式繼承父類name屬性
    SuperClass.call(this,name);
    //子類中新增共有屬性
    this.time = time;
}
//類式繼承 子類原型繼承父類
SubClass.prototype = new SuperClass();
//子類原型方法
SubClass.prototype.getTime =function () {
    console.log(this.time);
}
var instance1 = new SubClass("js",2018);
instance1.books.push("設(shè)計(jì)模式");
console.log(instance1.books);//[ "html", "css", "javaScript", "設(shè)計(jì)模式" ]
instance1.getName();//js
instance1.getTime();//2018
var instance2 = new SubClass("css",2018);
console.log(instance2.books);//[ "html", "css", "javaScript" ]
instance2.getName();//css
instance2.getTime();//2018

缺點(diǎn)：在使用構(gòu)造函數(shù)繼承時(shí)執(zhí)行了一遍父類的構(gòu)造函數(shù)，而在實(shí)現(xiàn)子類原型的類式繼承時(shí)又調(diào)用一遍父類構(gòu)造器，因此父類構(gòu)造器調(diào)用了兩遍。