資訊專欄INFORMATION COLUMN
摘要：注意這里跟原型鏈繼承有個(gè)比較明顯的區(qū)別是并沒有使用繼承而是在子類里面執(zhí)行父類的構(gòu)造函數(shù)相當(dāng)于把父類的代碼復(fù)制到子類里面執(zhí)行一遍這樣做的另一個(gè)好處就是可以給父類傳參。
Javascript繼承
學(xué)過后端語(yǔ)言的同學(xué)對(duì)繼承并不陌生，但是對(duì)JS繼承少許還是有些困惑，不要試圖問我是如果知道的，其實(shí)javascript繼承主要是基于原型prototype實(shí)現(xiàn)的。
其實(shí)當(dāng)你真正了解了原型鏈時(shí)候，再看js繼承，其實(shí)比OOP語(yǔ)言更靈活、更簡(jiǎn)單一些。接下來我們來看看原型鏈繼承吧：
//父類
function Animal(){}
//子類
function Dog(){}
//繼承
Dog.prototype = new Animal();
其實(shí)，就是把子類的prototype指向父類的實(shí)例，繼承就完成了，很簡(jiǎn)單吧。這就是原型鏈繼承
上面只是一個(gè)簡(jiǎn)單的繼承結(jié)果，并無(wú)實(shí)際意義，繼承的目的就是要共享父類的屬性和方法，接下來我們一步一步來揭開這神秘的面紗
/**
*
* 父類，帶屬性
* @constructor
* @param name 名字
* @param type 動(dòng)物分類
* @constructor
*/
function Animal(name,type) {
this.name = name || "your name";
this.type= type || 0;
this.coatColor= ["white","block","yellow","brown"]; //引用類型
//函數(shù)也是引用類型
this.speak = function () {
console.log(this.name+" speaking .");
}
}
}
/**
* 為父類新增一個(gè)方法
* @returns {boolean}
*/
Animal.prototype.say= function () {
console.log("my name is "+this.name);
};
/**
* 子類
* @constructor
*/
function Dog(name) {
this.name = name;
this.foot= 4;
}
//實(shí)現(xiàn)繼承-原型鏈繼承 => (子類 -> 子類原型->父類) ;繼承 注意,繼承必須要寫在子類方法定義的前面
Dog.prototype = new Animal();
/**
* 子類方法
* 為子類新增一個(gè)方法(在繼承之后,否則會(huì)被覆蓋/異常) dog.run is not a function
*/
Dog.prototype.run = function () {
console.log("The "+ this.name +" was runing.");
};
var dog = new Dog("taiSen");
console.log(dog.name); //dog --子類覆蓋父類的屬性
console.log(dog.type); // 0 --父類的屬性
console.log(dog.foot); //4 --子類自己的屬性
dog.say(); //my name is taiSen --繼承自父類的方法
dog.run(); //The taiSen was runing. --子類自己的方法
以上,看起來我們好像已經(jīng)完成了一個(gè)完整的繼承了。但是，原型鏈繼承有一個(gè)缺點(diǎn)，就是屬性如果是引用類型的話，會(huì)共享引用類型 ，接下來我個(gè)Animal增加引用類型屬性this.coatColor,測(cè)試下
//測(cè)試下
var dog1= new Dog();
var dog2 = new Dog();
dog1.coatColor.push("blue");
console.log(dog1.coatColor); // [ "white", "block", "yellow", "brown", "blue" ]
console.log(dog2.coatColor); // [ "white", "block", "yellow", "brown", "blue" ]
dog1,dog2 輸出的coatColor一樣，說明引用類型屬性會(huì)被所有實(shí)例共享--- 這就是原型鏈繼承的缺點(diǎn),那么我們?nèi)绻鉀Q這個(gè)問題呢？ 接下來我們就要借用————構(gòu)造函數(shù)繼承
//子類
function Cat() {
Animal.call(this) // 構(gòu)造函數(shù)繼承(繼承屬性)
}
//測(cè)試下
var cat1= new Cat();
var cat2 = new Cat();
cat1.coatColor.push("red");
console.log(cat1.coatColor); // [ "white", "block", "yellow", "brown", "red" ]
console.log(cat2.coatColor); // [ "white", "block", "yellow", "brown"]
從結(jié)果看，我們就解決了引用類型被所有實(shí)例共享的問題了。
注意：這里跟原型鏈繼承有個(gè)比較明顯的區(qū)別是并沒有使用prototype繼承,而是在子類里面執(zhí)行父類的構(gòu)造函數(shù), 相當(dāng)于把父類的代碼復(fù)制到子類里面執(zhí)行一遍,這樣做的另一個(gè)好處就是可以給父類傳參。
測(cè)試代碼：
/比如:
function Pig(name) {
Animal.call(this,name);
}
var pig1= new Animal("big Pig");
var pig2 = new Animal("small Pig");
console.log(pig1.name); // big Pig
console.log(pig2.name); //small Pig
看起來是不是很像java,C#語(yǔ)言啊,以上構(gòu)造函數(shù)解決了引用類型被所有實(shí)例共享的問題。
注意： 正因?yàn)闃?gòu)造函數(shù)解決了解決了引用類型被所有實(shí)例共享的問題,導(dǎo)致了一個(gè)相對(duì)很矛盾的問題出現(xiàn)了,——————函數(shù)也是引用類型,函數(shù)也沒辦法共享了.也就是說,每個(gè)實(shí)例里面的函數(shù),雖然功能一樣,但是卻不是同一個(gè)函數(shù),就相當(dāng)于我們每實(shí)例化一個(gè)子類,就復(fù)制了一遍的函數(shù)代碼。
//父類新增this.speak函數(shù)
function Animal(name,type) {
this.name = name || "your name";
this.type= type || 0;
this.coatColor= ["white","block","yellow","brown"]; //引用類型
//函數(shù)也是引用類型
this.speak = function () {
console.log(this.name+" speaking .");
}
}
//測(cè)試
console.log(pig1.speak===pig2.speak); // false
以上證明,父類的函數(shù),在子類的實(shí)例下是不共享的。
怎么辦呢？，以上可以看出原型鏈繼承 和 構(gòu)造函數(shù)繼承 這兩種繼承方式的優(yōu)缺點(diǎn)剛好是互相矛盾的,那么我們有沒有辦法魚和熊掌兼得呢? 答案是肯定的————組合繼承
// 父類
function Animal() {
this.name = name || "your name";
this.type= type || 0;
this.coatColor= ["white","block","yellow","brown"]; //引用類型
}
// 父類函數(shù)
Animal.prototype.speak =function () {
console.log(this.name+" speaking .");
}
// 子類
function Chicken(){
Animal.call(this) // 構(gòu)造函數(shù)繼承(繼承屬性)
}
// 繼承
Chicken.prototype = new Animal() // 原型鏈繼承(繼承方法)
總結(jié)
| 繼承方式 | 核心代碼 | 優(yōu)缺點(diǎn) | 用法 |
|---|---|---|---|
| 原型鏈繼承 | Dog.prototype = new Animal() | 實(shí)例的引用類型共享 | 繼承屬性 |
| 構(gòu)造函數(shù)繼承 | 在子類Cat)里執(zhí)行 Animal.call(this) | 會(huì)獨(dú)享所有屬性,包括引用屬性(重點(diǎn)是函數(shù)) | 繼承方法 |
| 組合繼承 | 利用原型鏈繼承要共享的屬性,利用構(gòu)造函數(shù)繼承要獨(dú)享的屬性 | 實(shí)現(xiàn)相對(duì)完美的繼承 | 結(jié)合上兩位 |
本文中的代碼見demo coding ，如果覺得對(duì)您有用，幫加個(gè)star,萬(wàn)分感謝！
今天就寫到這，講述了3種繼承方式，其實(shí)J繼承還有很多繼承方式。其他留在下期再見咯。
感覺各位的收看，歡迎提問。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95135.html
摘要：組合方式實(shí)現(xiàn)繼承原型鏈構(gòu)造函數(shù)喵喵喵汪汪汪與的唯一區(qū)別是多了這一句組合方式實(shí)現(xiàn)了對(duì)構(gòu)造函數(shù)內(nèi)和原型上所有屬性和方法的繼承，并且的實(shí)例對(duì)象之間也不會(huì)相互干擾。 前言 關(guān)于JavaScript繼承相關(guān)的定義和方法網(wǎng)上已經(jīng)有很多解釋啦，本菜鳥就不抄抄寫寫惹人嫌了，本文主要探討三種基本的繼承方式并且給出優(yōu)化方案。 正文 借助構(gòu)造函數(shù)實(shí)現(xiàn)繼承 function Parent1() { ...
摘要：構(gòu)造函數(shù)通過原型繼承了構(gòu)造函數(shù)和原型，這就形成了一個(gè)鏈條，通俗的講就是原型鏈繼承。而且方法只能冒充構(gòu)造函數(shù)里面的屬性和方法而無(wú)法冒充原型對(duì)象里面的屬性和方法還有最大的問題就是重復(fù)使用。 前言： 寫到這里，差不多就把OOP完結(jié)了，寫了幾篇OOP的文章，但是只是略懂皮毛，可能深入的OOP還有很多，但是我感覺寫到這里也算是差不多完結(jié)了。 繼承 繼承是面向?qū)ο蟊容^核心的概念，其他語(yǔ)言可能實(shí)現(xiàn)...
摘要：面向?qū)ο竺嫦驅(qū)ο缶幊痰娜Q是，簡(jiǎn)稱，面向?qū)ο缶幊淌怯贸橄蠓绞絼?chuàng)建基于現(xiàn)實(shí)世界模型的一種編程模式。面向?qū)ο缶幊痰娜齻€(gè)主要特征是封裝繼承多態(tài)。 面向?qū)ο?面向?qū)ο缶幊痰娜Q是Object Oriented Programming，簡(jiǎn)稱OOP，面向?qū)ο缶幊淌怯贸橄蠓绞絼?chuàng)建基于現(xiàn)實(shí)世界模型的一種編程模式。面向?qū)ο缶幊炭梢钥醋鍪鞘褂靡幌盗袑?duì)象相互協(xié)作的軟件設(shè)計(jì)，面向?qū)ο蟪绦蛟O(shè)計(jì)的目的是在編程中促...
摘要：在這其中我們就逃不開要討論繼承原型對(duì)象構(gòu)造函數(shù)實(shí)例了。想要獲得某一類型的構(gòu)造函數(shù)可以用來獲得，也可以對(duì)該屬性進(jìn)行賦值操作。三上面就提到一點(diǎn)是指構(gòu)造函數(shù)的原型對(duì)象，它是一個(gè)對(duì)象，它是構(gòu)造函數(shù)的屬性。 原型鏈這一個(gè)話題，需要和很多概念一起講，才能串成一個(gè)比較系統(tǒng)的知識(shí)點(diǎn)。在這其中我們就逃不開要討論繼承、原型對(duì)象、構(gòu)造函數(shù)、實(shí)例了。 一、構(gòu)造函數(shù) 構(gòu)造函數(shù)是一類特殊的函數(shù)，它的作用是用來生成...
摘要：中的和是一門很靈活的語(yǔ)言，尤其是。即然是面向?qū)ο蟮木幊陶Z(yǔ)言，那也是不可或缺的。在中，永遠(yuǎn)指向的是他的調(diào)用者。定義是存在于實(shí)例化后對(duì)象的一個(gè)屬性，并且指向原對(duì)象的屬性。我們?cè)跀U(kuò)展的時(shí)候，同時(shí)父類也會(huì)有對(duì)應(yīng)的方法，這很顯然是一個(gè)很嚴(yán)重的問題。 javascript中的this和new javascript是一門很靈活的語(yǔ)言，尤其是function。他即可以以面向過程的方式來用，比如： f...
閱讀 2075·2023-04-25 22:58
閱讀 1427·2021-09-22 15:20
閱讀 2706·2019-08-30 15:56
閱讀 2001·2019-08-30 15:54
閱讀 2117·2019-08-29 12:31
閱讀 2741·2019-08-26 13:37
閱讀 605·2019-08-26 13:25
閱讀 2107·2019-08-26 11:58
