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

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

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

類有三部分

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

構造函數(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

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

構造函數(shù)繼承

//構造函數(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)建第一個子類實例
var instance1 = new SubClass(10);
var instance2 = new SubClass(11);
instance1.books.push("設計模式");
console.log(instance1.books);//[ "javascript", "html", "css", "設計模式" ]
console.log(instance1.id);//10
console.log(instance2.books);//[ "javascript", "html", "css" ]
console.log(instance2.id);//11
instance1.showBooks();//[ "javascript", "html", "css", "設計模式" ]

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

組合繼承

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

//組合式繼承
//聲明父類
function SuperClass(name) {
    //值類型共有屬性
    this.name = name;
    //引用類型共有屬性
    this.books = ["html","css","javaScript"];
}
//父類原型共有方法
SuperClass.prototype.getName = function () {
    console.log(this.name);
}
//聲明子類
function SubClass(name,time) {
    //構造函數(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("設計模式");
console.log(instance1.books);//[ "html", "css", "javaScript", "設計模式" ]
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

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

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97866.html

SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創(chuàng)建了一個具體的對象。對象就是數(shù)據(jù)，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

李昌杰 2019-08-16 10:40 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創(chuàng)建了一個具體的對象。對象就是數(shù)據(jù)，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

Lyux 2019-06-28 13:32 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創(chuàng)建了一個具體的對象。對象就是數(shù)據(jù)，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

AaronYuan 2019-08-20 18:55 評論0 收藏0
JavaScript面向對象編程——面向對象

摘要：面向?qū)ο竺嫦驅(qū)ο蟮母攀雒嫦驅(qū)ο笫鞘裁疵嫦驅(qū)ο缶幊痰娜Q是，簡稱。面向?qū)ο缶幊淌怯贸橄蠓绞絼?chuàng)建基于現(xiàn)實世界模型的一種編程。面向?qū)ο缶幊炭梢钥醋鍪鞘褂靡幌盗袑ο笙嗷f(xié)作的軟件設計。面向?qū)ο缶幊痰纳礁柚饕奶卣魇欠庋b繼承多態(tài)。面向?qū)ο?面向?qū)ο蟮母攀?面向?qū)ο笫鞘裁?面向?qū)ο缶幊痰娜Q是Object Oriented Programming，簡稱OOP。面向?qū)ο缶幊淌怯贸橄蠓绞絼?chuàng)建基于現(xiàn)實...

SimonMa 2019-08-26 12:10 評論0 收藏0
JS對象(1)重新認識面向對象

摘要：對象重新認識面向?qū)ο竺嫦驅(qū)ο髲脑O計模式上看，對象是計算機抽象現(xiàn)實世界的一種方式。除了字面式聲明方式之外，允許通過構造器創(chuàng)建對象。每個構造器實際上是一個函數(shù)對象該函數(shù)對象含有一個屬性用于實現(xiàn)基于原型的繼承和共享屬性。 title: JS對象(1)重新認識面向?qū)ο? date: 2016-10-05 tags: JavaScript 0x00 面向?qū)ο?從設計模式上看，對象是...

superw 2019-08-21 11:17 評論0 收藏0
面向對象的 JavaScript

摘要：是完全的面向?qū)ο笳Z言，它們通過類的形式組織函數(shù)和變量，使之不能脫離對象存在。而在基于原型的面向?qū)ο蠓绞街?，對象則是依靠構造器利用原型構造出來的。 JavaScript 函數(shù)式腳本語言特性以及其看似隨意的編寫風格，導致長期以來人們對這一門語言的誤解，即認為 JavaScript 不是一門面向?qū)ο蟮恼Z言，或者只是部分具備一些面向?qū)ο蟮奶卣?。本文將回歸面向?qū)ο蟊疽猓瑥膶φZ言感悟的角度闡述為什...

novo 2019-08-21 10:49 評論0 收藏0