JavaScript繼承基礎(chǔ)講解(原型鏈、借用構(gòu)造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承)
說(shuō)好的講解JavaScript繼承，可是遲遲到現(xiàn)在講解。廢話不多說(shuō)，直接進(jìn)入正題。
既然你想了解繼承，證明你對(duì)JavaScript面向?qū)ο笠呀?jīng)有一定的了解，如還有什么不理解的可以參考《面向?qū)ο驤S基礎(chǔ)講解，工廠模式、構(gòu)造函數(shù)模式、原型模式、混合模式、動(dòng)態(tài)原型模式》，接下來(lái)講一般通過(guò)那些方法完成JavaScript的繼承。
原型鏈
JavaScript中實(shí)現(xiàn)繼承最簡(jiǎn)單的方式就是使用原型鏈，將子類(lèi)型的原型指向父類(lèi)型的實(shí)例即可，即“子類(lèi)型.prototype = new 父類(lèi)型();”，實(shí)現(xiàn)方法如下：
// 為父類(lèi)型創(chuàng)建構(gòu)造函數(shù)
function SuperType() {
this.name = ['wuyuchang', 'Jack', 'Tim'];
this.property = true;
}
// 為父類(lèi)型添加方法
SuperType.prototype.getSuerperValue = function() {
return this.property;
}
// 為子類(lèi)型創(chuàng)建構(gòu)造函數(shù)
function SubType() {
this.test = ['h1', 'h2', 'h3', 'h4'];
this.subproperty = false;
}
// 實(shí)現(xiàn)繼承的關(guān)鍵步驟，子類(lèi)型的原型指向父類(lèi)型的實(shí)例
SubType.prototype = new SuperType();
// 在此處給子類(lèi)型添加方法，一定要在實(shí)現(xiàn)繼承之后，否則會(huì)在將指針指向父類(lèi)型的實(shí)例，則方法為空
SubType.prototype.getSubValue = function() {
return this.subproperty;
}
/* 以下為測(cè)試代碼示例 */
var instance1 = new SubType();
instance1.name.push('wyc');
instance1.test.push('h5');
alert(instance1.getSuerperValue()); // true
alert(instance1.getSubValue()); // false
alert(instance1.name); // wuyuchang,Jack,Tim,wyc
alert(instance1.test); // h1,h2,h3,h4,h5
var instance2 = new SubType();
alert(instance2.name); // wuyuchang,Jack,Tim,wyc
alert(instance2.test); // h1,h2,h3,h4
可以看到如上的代碼就是通過(guò)原型鏈實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的繼承，但看到測(cè)試代碼示例中還是存在些問(wèn)題。相信看了我的博文《面向?qū)ο驤S基礎(chǔ)講解，工廠模式、構(gòu)造函數(shù)模式、原型模式、混合模式、動(dòng)態(tài)原型模式》的童鞋一定知道原型鏈代碼存在的第一個(gè)問(wèn)題是由于子類(lèi)型的原型是父類(lèi)型的實(shí)例，也就是子類(lèi)型的原型中包含的父類(lèi)型的屬性，從而導(dǎo)致引用類(lèi)型值的原型屬性會(huì)被所有實(shí)例所共享。以上代碼的instance1.name.push('wyc');就可以證明此問(wèn)題的存在。而原型鏈的第二個(gè)問(wèn)題就是：在創(chuàng)建子類(lèi)型的實(shí)例時(shí)，不能向超類(lèi)型的構(gòu)造函數(shù)中傳遞參數(shù)。因此我們?cè)趯?shí)際開(kāi)發(fā)中，很少單獨(dú)使用原型鏈。
借用構(gòu)造函數(shù)
為了解決原型鏈中存在的兩個(gè)問(wèn)題，開(kāi)發(fā)人員開(kāi)始使用一種叫做借用構(gòu)造函數(shù)的技術(shù)來(lái)解決原型鏈中存在的問(wèn)題。這種技術(shù)的實(shí)現(xiàn)思路也挺簡(jiǎn)單，只需要在子類(lèi)型的構(gòu)造函數(shù)內(nèi)調(diào)用父類(lèi)型的構(gòu)造函數(shù)即可。別忘了，函數(shù)只不過(guò)是在特定環(huán)境中執(zhí)行代碼的對(duì)象，因此可以通過(guò)apply()或call()方法執(zhí)行構(gòu)造函數(shù)。代碼如下：
// 為父類(lèi)型創(chuàng)建構(gòu)造函數(shù)
function SuperType(name) {
this.name = name;
this.color = ['pink', 'yellow'];
this.property = true;
this.testFun = function() {
alert('http://tools.jb51.net/');
}
}
// 為父類(lèi)型添加方法
SuperType.prototype.getSuerperValue = function() {
return this.property;
}
// 為子類(lèi)型創(chuàng)建構(gòu)造函數(shù)
function SubType(name) {
SuperType.call(this, name);
this.test = ['h1', 'h2', 'h3', 'h4'];
this.subproperty = false;
}
// 在此處給子類(lèi)型添加方法，一定要在實(shí)現(xiàn)繼承之后，否則會(huì)在將指針指向父類(lèi)型的實(shí)例，則方法為空
SubType.prototype.getSubValue = function() {
return this.subproperty;
}
/* 以下為測(cè)試代碼示例 */
var instance1 = new SubType(['wuyuchang', 'Jack', 'Nick']);
instance1.name.push('hello');
instance1.test.push('h5');
instance1.color.push('blue');
instance1.testFun(); // http://tools.jb51.net/
alert(instance1.name); // wuyuchang,Jack,Nick,hello
// alert(instance1.getSuerperValue()); // error 報(bào)錯(cuò)
alert(instance1.test); // h1,h2,h3,h4,h5
alert(instance1.getSubValue()); // false
alert(instance1.color); // pink,yellow,blue
var instance2 = new SubType('wyc');
instance2.testFun(); // http://tools.jb51.net/
alert(instance2.name); // wyc
// alert(instance2.getSuerperValue()); // error 報(bào)錯(cuò)
alert(instance2.test); // h1,h2,h3,h4
alert(instance2.getSubValue()); // false
alert(instance2.color); // pink,yellow
可以看到以上代碼中子類(lèi)型SubType的構(gòu)造函數(shù)內(nèi)通過(guò)調(diào)用父類(lèi)型"SuperType.call(this, name);"，從而實(shí)現(xiàn)了屬性的繼承，也可以在子類(lèi)型創(chuàng)建實(shí)例的時(shí)候?yàn)楦割?lèi)型傳遞參數(shù)了，但新的問(wèn)題又來(lái)了。可以看到我在父類(lèi)型的構(gòu)造函數(shù)中定義了一個(gè)方法：testFun，在父類(lèi)型的原型中定義了一個(gè)方法：getSuperValue。可是在實(shí)例化子類(lèi)型后仍然是無(wú)法調(diào)用父類(lèi)型的原型中定義的方法getSuperValue，只能調(diào)用父類(lèi)型中構(gòu)造函數(shù)的方法：testFun。這就同創(chuàng)建對(duì)象中只使用構(gòu)造函數(shù)模式一樣，使得函數(shù)沒(méi)有復(fù)用性可言?？紤]到這些問(wèn)題，借用構(gòu)造函數(shù)的技術(shù)也是很少單獨(dú)使用的。
組合繼承（原型鏈+借用構(gòu)造函數(shù)）
顧名思義，組合繼承就是結(jié)合使用原型鏈與借用構(gòu)造函數(shù)的優(yōu)點(diǎn)，組合而成的一個(gè)模式。實(shí)現(xiàn)也很簡(jiǎn)單，既然是結(jié)合，那當(dāng)然結(jié)合了兩方的優(yōu)點(diǎn)，即原型鏈繼承方法，而在構(gòu)造函數(shù)繼承屬性。具體代碼實(shí)現(xiàn)如下：
// 為父類(lèi)型創(chuàng)建構(gòu)造函數(shù)
function SuperType(name) {
this.name = name;
this.color = ['pink', 'yellow'];
this.property = true;
this.testFun = function() {
alert('http://tools.jb51.net/');
}
}
// 為父類(lèi)型添加方法
SuperType.prototype.getSuerperValue = function() {
return this.property;
}
// 為子類(lèi)型創(chuàng)建構(gòu)造函數(shù)
function SubType(name) {
SuperType.call(this, name);
this.test = ['h1', 'h2', 'h3', 'h4'];
this.subproperty = false;
}
SubType.prototype = new SuperType();
// 在此處給子類(lèi)型添加方法，一定要在實(shí)現(xiàn)繼承之后，否則會(huì)在將指針指向父類(lèi)型的實(shí)例，則方法為空
SubType.prototype.getSubValue = function() {
return this.subproperty;
}
/* 以下為測(cè)試代碼示例 */
var instance1 = new SubType(['wuyuchang', 'Jack', 'Nick']);
instance1.name.push('hello');
instance1.test.push('h5');
instance1.color.push('blue');
instance1.testFun(); // http://tools.jb51.net/
alert(instance1.name); // wuyuchang,Jack,Nick,hello
alert(instance1.getSuerperValue()); // true
alert(instance1.test); // h1,h2,h3,h4,h5
alert(instance1.getSubValue()); // false
alert(instance1.color); // pink,yellow,blue
var instance2 = new SubType('wyc');
instance2.testFun(); // http://tools.jb51.net/
alert(instance2.name); // wyc
alert(instance2.getSuerperValue()); // true
alert(instance2.test); // h1,h2,h3,h4
alert(instance2.getSubValue()); // false
alert(instance2.color); // pink,yellow
以上代碼通過(guò)SuperType.call(this, name);繼承父類(lèi)型的屬性，通過(guò)SubType.prototype = new SuperType();繼承父類(lèi)型的方法。以上代碼很方便的解決了原型鏈與借用構(gòu)造函數(shù)所遇到的問(wèn)題，成為了JavaScript中最為常用的實(shí)例繼承的方法。但混合模式也并非沒(méi)有缺點(diǎn)，可以看到在以上代碼中在繼承方法的時(shí)候?qū)嶋H已經(jīng)繼承了父類(lèi)型的屬性，只不過(guò)此時(shí)對(duì)于引用類(lèi)型屬于共享的，因此在子類(lèi)型的構(gòu)造函數(shù)內(nèi)在次調(diào)用父類(lèi)型的構(gòu)造函數(shù)從而繼承了父類(lèi)型的屬性而去覆蓋了原型中所繼承的屬性，這樣調(diào)用兩次構(gòu)造函數(shù)顯然沒(méi)有必要，但有什么方法可以解決呢？在解決此問(wèn)題時(shí)先看以下兩個(gè)模式。
原型式繼承
原型式繼承的的實(shí)現(xiàn)方法與普通繼承的實(shí)現(xiàn)方法不同，原型式繼承并沒(méi)有使用嚴(yán)格意義上的構(gòu)造函數(shù)，而是借助原型可以基于已有的對(duì)象創(chuàng)建新對(duì)象，同時(shí)還不必因此創(chuàng)建自定義類(lèi)型。具體代碼如下：
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
代碼示例：
/* 原型式繼承 */
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
var person = {
name : 'wuyuchang',
friends : ['wyc', 'Nicholas', 'Tim']
}
var anotherPerson = object(person);
anotherPerson.name = 'Greg';
anotherPerson.friends.push('Bob');
var anotherPerson2 = object(person);
anotherPerson2.name = 'Jack';
anotherPerson2.friends.push('Rose');
alert(person.friends); // wyc,Nicholas,Tim,Bob,Rose
寄生式繼承
/* 寄生式繼承 */
function createAnother(original) {
var clone = object(original);
clone.sayHi = function() {
alert('hi');
}
return clone;
}
使用示例：
/* 原型式繼承 */
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
/* 寄生式繼承 */
function createAnother(original) {
var clone = object(original);
clone.sayHi = function() {
alert('hi');
}
return clone;
}
var person = {
name : 'wuyuchang',
friends : ['wyc', 'Nicholas', 'Rose']
}
var anotherPerson = createAnother(person);
anotherPerson.sayHi();
寄生組合式繼承
前面說(shuō)過(guò)了JavaScrip中組合模式實(shí)現(xiàn)繼承的缺點(diǎn)，現(xiàn)在我們就來(lái)解決它的缺點(diǎn)，實(shí)現(xiàn)思路是，對(duì)于構(gòu)造函數(shù)繼承屬性，而原型鏈的混成形式繼承方法，即不用在繼承方法的時(shí)候?qū)嵗割?lèi)型的構(gòu)造函數(shù)。代碼如下：
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
/* 寄生組合式繼承 */
function inheritPrototype(subType, superType) {
var prototype = object(superType.prototype);
prototype.constructor = subType;
subType.prototype = prototype;
}
而在使用時(shí)只需要將組合模式中的“SubType.prototype = new SuperType();”這行代碼替換成inheritPrototype(subType, superType);即可。寄生組合式繼承的高效率體現(xiàn)在它只調(diào)用了一次父類(lèi)型構(gòu)造函數(shù)，避免了創(chuàng)建不必要的或多余的屬性。與此同時(shí)，原型鏈還能保持不變，因此，還能夠正常使用instanceof和isPrototypeof()。這也是目前來(lái)說(shuō)最理想的繼承方式了，目前也在向這種模式轉(zhuǎn)型。（YUI也使用了這種模式。）
此博文參考《JavaScript高級(jí)程序設(shè)計(jì)第3版》，代碼為經(jīng)過(guò)改寫(xiě)，更具體，并加了注釋使大家更易懂。如對(duì)JS繼承方面有獨(dú)到見(jiàn)解的童鞋不別吝嗇，回復(fù)您的見(jiàn)解供大家參考！
相關(guān)文章
認(rèn)識(shí)Knockout及如何使用Knockout綁定上下文
Knockout簡(jiǎn)稱(chēng)ko，是一個(gè)輕量級(jí)的javascript類(lèi)庫(kù)，采用MVVM設(shè)計(jì)模式（即Model、view、viewModel），簡(jiǎn)單優(yōu)雅的實(shí)現(xiàn)了雙向綁定，實(shí)時(shí)更新，幫助您使用干凈的數(shù)據(jù)模型來(lái)創(chuàng)建豐富的、響應(yīng)式的用戶(hù)界面2015-12-12
頁(yè)面中實(shí)現(xiàn)setInterval和setTimeout效果示例詳解
這篇文章主要為大家介紹了不使用setTimeout和setInterval在頁(yè)面中實(shí)現(xiàn)setInterval和setTimeout效果示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了JavaScript繼承與多繼承,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript繼承與多繼承的概念、原理、實(shí)現(xiàn)與使用方法,需要的朋友可以參考下2018-05-05
這篇文章主要為大家詳細(xì)介紹了js+css打字效果的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04
js實(shí)現(xiàn)視頻鏡面反轉(zhuǎn)的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)視頻鏡面反轉(zhuǎn)的效果,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
javascript實(shí)現(xiàn)固定側(cè)邊欄
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)固定側(cè)邊欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)一鍵登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了js實(shí)現(xiàn)表單Radio切換效果的方法,涉及javascript實(shí)現(xiàn)頁(yè)面元素的隱藏與顯示及復(fù)選框的遍歷技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
JavaScript之map reduce_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript之map reduce的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這兩天一直在弄ajax，用多了才發(fā)現(xiàn)了ajax?的cache問(wèn)題，請(qǐng)求了好多次，得到了確是相同的結(jié)果，經(jīng)常我想在請(qǐng)求的同時(shí)去做一些其它的事情，我在想javascript里有沒(méi)有辦法用多線程，經(jīng)過(guò)在網(wǎng)上查找找到了結(jié)果。2008-11-11