面向對象的JavaScript之繼承(一) 類式繼承

forsigner 發(fā)布于2019-08-20 14:21 / 772人閱讀

摘要：那你們肯定會問為什么共用，而沒有共用呢，下面就給你解釋，請看引用類型是共用的值類型是私用的。

引言

面向對象的編程語言都具繼承這一機制,而 JavaScript 是基于原型(Prototype)面向對象程序設計,所以它的實現(xiàn)方式也是基于原型(Prototype)實現(xiàn)的.

繼承的方式

類式繼承

構造函數(shù)繼承

組合繼承

原型式繼承

寄生式繼承

寄生組合式繼承

1.類式繼承

//聲明父類
function SuperClass(){
    //值類型
    this.superValue = true;
    //引用類型
    this.book = ["c","java","htnl"]
}

//為父類添加方法
SuperClass.prototype.getSuperValue =function(){
    return this.superValue;
}

//聲明子類
function SubClass(){
    this.subValue = false;
}
//繼承父類
SubClass.prototype = new SuperClass();

//為子類添加方法
SubClass.prototype.getSubValue = function(){
    return this.subValue;
}

//測試
var a = new SubClass(); 
var b = new SubClass(); 
console.log(a.getSubValue()); //false
console.log(a.getSuperValue());  //true

console.log(a.book);//["c", "java", "htnl"]
console.log(b.book);//["c", "java", "htnl"]
a.book.push("css");
console.log(a.book);//["c", "java", "htnl", "css"]
console.log(b.book);//["c", "java", "htnl", "css"]

console.log(a.getSuperValue())//true
console.log(b.getSuperValue())//true
a.superValue = "a";

console.log(a.getSuperValue())//a
console.log(b.getSuperValue())//true

console.log(a.getSubValue())//false
console.log(b.getSubValue())//false
a.subValue = "sub";

console.log(a.getSubValue())//sub
console.log(b.getSubValue())//false

通過測試可以得知類式繼承有如下特點:

通過子類原型繼承父類的實例實現(xiàn)繼承.

子類實例的原型都是父類實例,所以 a b 都是用的是 父類的實例.所以它的屬性共用(值類型,引用類型)。那你們肯定會問：為什么book 共用，而 subValue 沒有共用呢，下面就給你解釋，請看2

引用類型是共用的,值類型是私用的。

其實：值類型按理說應該和值類型一樣，都是共用的，但是因為 this 的原因，this.superValue尋值時由近到遠，先尋找 a，若 a 沒有則尋找 a 的原型`prototype`,一直往上,若沒有則返回`"undefined"`,這樣你就知道為什么給a.book.push("css"); 之后 b.book 也發(fā)生了改變,因為它是尋找到原型上的 book 值,而a.superValue = "a"; 則直接給 a 添加了個 superValue 屬性,而沒有去 原型`prototype`的superValue賦值,則輸出的時候也是就近.

下一節(jié)講解面向對象的JavaScript之繼承(二) 構造函數(shù)繼承

參考

個人博客

JavaScript 設計模式 --- 張容銘著

注

本人對類式繼承的一點點理解,若是那里解釋的有問題,請多指教,謝謝!

GPU云服務器云服務器 javascript類的繼承 javascript繼承 javascript繼承方法 Javascript實現(xiàn)繼承

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81570.html

面向對象的 JavaScript

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

novo 2019-08-21 10:49 評論0 收藏0
javaScript面向對象編程-繼承（一）

摘要：組合繼承前面兩種模式的特點類式繼承通過子類的原型對父類實例化實現(xiàn)的，構造函數(shù)式繼承是通過在子類的構造函數(shù)作用環(huán)境中執(zhí)行一次父類的構造函數(shù)來實現(xiàn)的。類有三部分構造函數(shù)內(nèi)的，供實例化對象復制用的構造函數(shù)外的，直接通過點語法添加的，供類使用，實例化對象訪問不到類的原型中的，實例化對象可以通過其原型鏈間接地訪問到，也是供所有實例化對象所共用的。類式繼承類的原型對象的作用就是為類...

YorkChen 2019-08-23 12:02 評論0 收藏0
JS對象(1)重新認識面向對象

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

superw 2019-08-21 11:17 評論0 收藏0
JavaScript面向對象編程-繼承（三）

摘要：子類不是父類實例的問題是由類式繼承引起的。所以寄生式繼承和構造函數(shù)繼承的組合又稱為一種新的繼承方式。但是這里的寄生式繼承處理的不是對象，而是類的原型。看上去略微復雜，還得好好研究。寄生組合式繼承（終極繼承者）前面學習了類式繼承和構造函數(shù)繼承組合使用，也就是組合繼承，但是這種繼承方式有個問題，就是子類不是父類的實例，而子類的原型是父類的實例。子類不是父類實例的問題是由類式繼承引起的。...

alaege 2019-08-23 12:04 評論0 收藏0
Javascript 設計模式讀書筆記(三)——繼承

摘要：的繼承方式屬于原型式繼承，非常靈活。當使用關鍵字執(zhí)行類的構造函數(shù)時，系統(tǒng)首先創(chuàng)建一個新對象，這個對象會繼承自構造函數(shù)的原型對象新對象的原型就是構造函數(shù)的屬性。也就是說，構造函數(shù)用來對生成的新對象進行一些處理，使這個新對象具有某些特定的屬性。繼承這個東西在Javascript中尤其復雜，我掌握得也不好，找工作面試的時候在這個問題上栽過跟頭。Javascript的繼承方式屬于原型式繼承，...

cangck_X 2019-08-21 12:16 評論0 收藏0