js類式繼承的具體實(shí)現(xiàn)方法
在開始擺弄代碼之前，應(yīng)該搞清楚使用繼承的目的和能帶來什么好處。一般來說，在設(shè)計(jì)類的時候，我們希望能減少重復(fù)性的代碼，并且盡量弱化類之間的耦合。而要做到這兩者都兼顧是很難的，我們需要根據(jù)具體的條件和環(huán)境下決定我們應(yīng)該采取什么方法。根據(jù)我們對面向?qū)ο笳Z言中繼承的了解，繼承會帶類直接的強(qiáng)耦合，但js由于其特有的靈活性，可以設(shè)計(jì)出強(qiáng)耦合和弱耦合，高效率和低效率的代碼。而具體用什么，看情況。
下面提供js實(shí)現(xiàn)繼承的三種方法：類式繼承，原型繼承，摻元類。這里先簡述類式繼承，后兩種在往后的隨便中簡述，請多多關(guān)注、指導(dǎo)，謝謝。
類式繼承。
js類式繼承的實(shí)現(xiàn)依靠原型鏈來實(shí)現(xiàn)的。什么是原型鏈？js中對象有個屬性prototy，這個屬性返回對象類型的引用，用于提供對象的類的一組基本功能。
貌似對prototype有印象，對了，我們經(jīng)常這樣用代碼。
var Person = function(){
this.name = "liyatang";
};
Person.prototype = {
//可以在這里提供Person的基本功能
getName : function(){
return this.name;
}
}
我們把類的基本功能放在prototype屬性里，表示Person這個對象的引用有XXX功能。
在理解原型后，需要理解下什么是原型鏈。在訪問對象的某個成員(屬性或方法)時，如果這個成員未見于當(dāng)前對象，那么js會在prototype屬性所指的那個對象中查找它，如果還沒有找到，就繼續(xù)到下一級的prototype所指的對象中查找，直至找到。如果沒有找到就會返回undifined。
那么原型鏈給我們什么提示呢？很容易聯(lián)想到，原型鏈意味著讓一個類繼承另一個類，只需將子類的prototype設(shè)置為指向父類的一個實(shí)例即可。這就把父類的成員綁定到子類上了，因?yàn)樵谧宇惿喜檎也坏侥硞€成員時會往父類中查找。（以上這兩段用詞不嚴(yán)謹(jǐn)，只在用通俗易懂的言語描述）
下面我們需要個Chinese類，需要繼承Person類的name和getName成員。
var Chinese = function(name, nation){
//繼承，需要調(diào)用父類的構(gòu)造函數(shù)，可以用call調(diào)用，this指向Chinese
//使Person在此作用域上，才可以調(diào)用Person的成員
Person.call(this,name);
this.nation = nation;
};
Chinese.prototype = Person.prototype;
//這里不可和以前一樣，因?yàn)楦采w掉了prototype屬性
//Chinese.prototype = {
// getNation : function(){
// return this.nation;
// }
//};
//以后的方法都需要這樣加
Chinese.prototype.getNation = function(){
return this.nation;
};
繼承關(guān)系就建立了，我們這樣調(diào)用它
var c = new Chinese("liyatang","China");
alert(c.getName());// liyatang
于是類式繼承就這樣完成了。難道真的完成了嘛，用firebug在alert那里設(shè)斷點(diǎn)，會發(fā)現(xiàn)原來的Person.prototype被修改了，添加了getNation方法。
這是因?yàn)樵谏厦娴拇aChinese.prototype = Person.prototype; 這是引用類型，修改Chinese同時也修改了Person。這本身就是不能容忍的，且使類之間形成強(qiáng)耦合性，這不是我們要的效果。
我們可以另起一個對象或?qū)嵗粋€實(shí)例來弱化耦合性。
//第一種
//Chinese.prototype = new Person();
//第二種
//var F = function(){};
//F.prototype = Person.prototype;
//Chinese.prototype = F.prototype;
這兩種方法有什么區(qū)別呢。在第二種中添加了一個空函數(shù)F，這樣做可以避免創(chuàng)建父類的一個實(shí)例，因?yàn)橛锌赡芨割悤容^龐大，而且父類的構(gòu)造函數(shù)會有一些副作用，或者說會執(zhí)行大量的計(jì)算任務(wù)。所以力薦第二種方法。
到此，完了嘛，還沒有！在對象的屬性prototype下面有個屬性constructor，它保存了對構(gòu)造特定對象實(shí)例的函數(shù)的引用。根據(jù)這個說法Chiese.prototype.constructor應(yīng)該等于Chinese，實(shí)際上不是。
回憶之前在設(shè)置Chiese的原型鏈時，我們把Person.prototype 覆蓋掉了Chiese.prototype。所以此時的Chiese.prototype.constructor是Person。我們還需要添加以下代碼
//對這里的if條件不需要細(xì)究，知道Chinese.prototype.constructor = Chinese就行
if(Chinese.prototype.constructor == Object.prototype.constructor){
Chinese.prototype.constructor = Chinese;
}
整理全部代碼如下
var Person = function(name){
this.name = name;
};
Person.prototype = {
getName : function(){
return this.name;
}
};
var Chinese = function(name, nation){
Person.call(this,name);
this.nation = nation;
};
var F = function(){};
F.prototype = Person.prototype;
Chinese.prototype = F.prototype;
if(Chinese.prototype.constructor == Object.prototype.constructor){
Chinese.prototype.constructor = Chinese;
}
Chinese.prototype.getNation = function(){
return this.nation;
};
var c = new Chinese("liyatang","China");
alert(c.getName());
如果可以把繼承的代碼放在一個函數(shù)里，方便代碼復(fù)用，最后整理代碼如下
function extend(subClass,superClass){
var F = function(){};
F.prototype = superClass.prototype;
subClass.prototype = new F();
subClass.prototype.constructor = subClass;
subClass.superclass = superClass.prototype; //加多了個屬性指向父類本身以便調(diào)用父類函數(shù)
if(superClass.prototype.constructor == Object.prototype.constructor){
superClass.prototype.constructor = superClass;
}
}
var Person = function(name){
this.name = name;
};
Person.prototype = {
getName : function(){
return this.name;
}
};
var Chinese = function(name, nation){
Person.call(this,name);
this.nation = nation;
};
extend(Chinese, Person);
Chinese.prototype.getNation = function(){
return this.nation;
};
var c = new Chinese("liyatang","China");
alert(c.getName());
發(fā)表后修改：
在一樓的評論下，我對那個extend函數(shù)又有新的看法。之前在討論如何設(shè)置原型鏈時提出了兩種方法
//第一種
//Chinese.prototype = new Person();
//第二種
//var F = function(){};
//F.prototype = Person.prototype;
//Chinese.prototype = F.prototype;
雖然第二種減少了調(diào)用父類的構(gòu)造函數(shù)這條路，但在設(shè)計(jì)Chinese類時用了Person.call(this,name);這里也相當(dāng)于調(diào)用了父類的構(gòu)造函數(shù)。
然而用第一種方法的話可以減少在Chinese中再寫Person.call(this,name);，這部分代碼在子類中往往會遺忘。不妨把這種功能代碼放在了extend里。就只寫
Chinese.prototype = new Person();也達(dá)到同樣的目的：耦合不強(qiáng)。
但遺忘的一點(diǎn)是，Chinese.prototype = new Person();這樣寫對嘛。答案是不對！很明顯 new Person()需要傳一個name參數(shù)的。我們不可能在extend函數(shù)里做這部分工作，只好在Chinese類里調(diào)用父類的構(gòu)造函數(shù)了。這樣也符合面向?qū)ο蟮乃悸贰?/P>
所以，還是力薦用第二種方法。
第一次這樣寫有關(guān)技術(shù)類的文章，基本是按自己的思路鋪展開來，難免會有一些沒有考慮到的地方和解釋的不清楚的地方，望留言反饋，謝謝。
相關(guān)文章
JavaScript中的正則表達(dá)式簡明總結(jié)
這篇文章主要介紹了JavaScript中的正則表達(dá)式,簡明總結(jié)了正則中的語法含義和RegExp對象,需要的朋友可以參考下2014-04-04
本文譯自 Github 上的一篇文章，目的是對還不太熟悉 ES6語法的同學(xué)做一個簡單的掃盲。下面一起來學(xué)習(xí)。2016-07-07
這篇文章主要介紹了typescript常見高級技巧總結(jié),需要的朋友可以參考下2022-10-10
這篇文章主要介紹了JavaScript中fixed()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
實(shí)例分析javascript中的call()和apply()方法
因項(xiàng)目需求去研究了下javascript中的call和apply方法，去百度看了幾篇介紹JS中call和apply的文章，總覺得不是很好懂，這里寫下我自己的理解，供網(wǎng)友們參考。2014-11-11
簡介JavaScript中Math.cos()余弦方法的使用
這篇文章主要介紹了簡介JavaScript中Math.cos()余弦方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
JavaScript中的call方法和apply方法使用對比
這篇文章主要介紹了JavaScript中的call方法和apply方法使用對比,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript reduce的基本用法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
JavaScript中用于四舍五入的Math.round()方法講解
這篇文章主要介紹了JavaScript中用于四舍五入的Math.round()方法講解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了js中的caller和callee屬性介紹和例子,需要的朋友可以參考下2014-06-06