?類式繼承（構(gòu)造函數(shù)）

JS中其實(shí)是沒有類的概念的，所謂的類也是模擬出來的。特別是當(dāng)我們是用new 關(guān)鍵字的時(shí)候，就使得“類”的概念就越像其他語言中的類了。類式繼承是在函數(shù)對象內(nèi)調(diào)用父類的構(gòu)造函數(shù)，使得自身獲得父類的方法和屬性。call和apply方法為類式繼承提供了支持。通過改變this的作用環(huán)境，使得子類本身具有父類的各種屬性。

JavaScript var father = function() { this.age = 52; this.say = function() { alert('hello i am '+ this.name ' and i am '+this.age + 'years old'); } } var child = function() { this.name = 'bill'; father.call(this); } var man = new child(); man.say();

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

var father = function() { ??this.age = 52; ??this.say = function() { ????alert('hello i am '+ this.name ' and i am '+this.age + 'years old'); ??} } var child = function() { ??this.name = 'bill'; ??father.call(this); } var man = new child(); man.say();

?

原型繼承

原型繼承在開發(fā)中經(jīng)常用到。它有別于類繼承是因?yàn)槔^承不在對象本身，而在對象的原型上（prototype）。每一個(gè)對象都有原型，在瀏覽器中它體現(xiàn)在一個(gè)隱藏的__proto__屬性上。在一些現(xiàn)代瀏覽器中你可以更改它們。比如在zepto中，就是通過添加zepto的fn對象到一個(gè)空的數(shù)組的__proto__屬性上去，從而使得該數(shù)組成為一個(gè)zepto對象并且擁有所有的方法。話說回來，當(dāng)一個(gè)對象需要調(diào)用某個(gè)方法時(shí)，它回去最近的原型上查找該方法，如果沒有找到，它會再次往下繼續(xù)查找。這樣逐級查找，一直找到了要找的方法。 這些查找的原型構(gòu)成了該對象的原型鏈條。原型最后指向的是null。我們說的原型繼承，就是將父對像的方法給子類的原型。子類的構(gòu)造函數(shù)中不擁有這些方法和屬性。

JavaScript var father = function() { } father.prototype.a = function() { } var child = function(){} //開始繼承 child.prototype = new father(); var man = new child(); man.a();

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var father = function() { } father.prototype.a = function() { } var child = function(){} //開始繼承 child.prototype = new father(); var man = new child(); man.a();

可以看到第七行實(shí)現(xiàn)了原型繼承。很多人并不陌生這種方式。通過在瀏覽器中打印man我們就可以查看各個(gè)原型的繼承關(guān)系。

可以看到逐級的關(guān)系child->object（father實(shí)例化的對象）->father。child是通過中間層繼承了father的原型上的東西的。但是為什么中間還有一層object呢，為什么不把child.prototype = father.prototype。答案是如果這樣做child和father就沒有區(qū)別了。大家應(yīng)該還記得在prototype中有個(gè)constructor屬性，指向的是構(gòu)造函數(shù)。按照正常的情況我們要把constructor的值改回來指向child的構(gòu)造函數(shù)。但如果直接把father.prototype賦值給child.prototype，那么constructor應(yīng)該指向誰呢？所以很顯然只能通過中間層才能使得child和father保持為獨(dú)立的對象。

對比

和原型對比起來，構(gòu)造函數(shù)（類）式繼承有什么不一樣呢？首先，構(gòu)造函數(shù)繼承的方法都會存在父對象之中，每一次實(shí)例，都回將funciton保存在內(nèi)存中，這樣的做法毫無以為會帶來性能上的問題。其次類式繼承是不可變的。在運(yùn)行時(shí)，無法修改或者添加新的方法，這種方式是一種固步自封的死方法。而原型繼承是可以通過改變原型鏈接而對子類進(jìn)行修改的。另外就是類式繼承不支持多重繼承，而對于原型繼承來說，你只需要寫好extend對對象進(jìn)行擴(kuò)展即可。

?

組合模式

另外的一種模式，是結(jié)合類繼承和原型繼承的各自優(yōu)點(diǎn)來進(jìn)行對父類的繼承。用類式繼承屬性，而原型繼承方法。這種模式避免了屬性的公用，因?yàn)橐话銇碚f，每一個(gè)子類的屬性都是私有的，而方法得到了統(tǒng)一。這種模式稱為組合模式，也是繼承類式常用到的一種方法。

JavaScript function father() { this.a = 'father' } father.prototype.b = function() { alert(this.a) } var child = function() { father.call(this) } child.prototype = new father();

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

function father() { ??this.a = 'father'?? } father.prototype.b = function() { ?? alert(this.a) } var child = function() { ??father.call(this) } child.prototype = new father();

?

new 關(guān)鍵字和Obeject.create方法

在文章中，博主指出了使用new關(guān)鍵字的弊端。他說：“new關(guān)鍵字掩蓋了Javascript中真正的原型繼承，使得它更像是基于類的繼承。其實(shí)new關(guān)鍵字只是Javascript在為了獲得流行度而加入與Java類似的語法時(shí)期留下來的一個(gè)殘留物”。作者推薦我們使用Object.create方法創(chuàng)建或者實(shí)例化對象。露珠做過測試，使用new和使用object.create方法都是將對象添加到原型上去。我們可以看一下代碼：

JavaScript var father = function() { this.a = 'father' } father.prototype.b = function() {alert(this.a)} var obj = new father();

1 2 3 4 5 6 7 8 9

var father = function() { ????this.a = 'father'?? } father.prototype.b = function() {alert(this.a)} var obj = new father();

在瀏覽器中打印obj，可以觀察它的結(jié)構(gòu)。它本身是一個(gè)對象，有自身屬性，同時(shí)在其__proto__熟悉上也有b方法。在__proto__的后面有father，可以看出原型是自father來的。

那么objcet.create方法呢，我們也可以通過下面代碼測試之:

JavaScript var father = { a: 'father', b: function() { alert(this.a); } } var obj = Object.create(father); console.dir(obj)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var father = { ??a: 'father', ??b: function() { ???? alert(this.a); ?? } } var obj = Object.create(father); console.dir(obj)

下面是瀏覽器輸出的結(jié)果:

可以看到，用create的方法構(gòu)造出來的對象，a屬性和b方法都是在對象的原型上，也就是說我們可以通過更改father的屬性動態(tài)改變obj的原型上的方法和屬性，而上面通過new關(guān)鍵字用構(gòu)造函數(shù)生成的實(shí)例，a屬性是無法改變的。從這里，我們也可以看到類繼承和原型基礎(chǔ)的一些區(qū)別。

結(jié)論

原型繼承比較符合js這種語言的特點(diǎn)。因?yàn)樗旧砭褪莏s強(qiáng)大的原型的一部分。而類式繼承，與其稱它為繼承方式，毋寧說是一種函數(shù)的運(yùn)用技巧來模擬繼承罷了。

轉(zhuǎn)載于:https://www.cnblogs.com/wudaoyongchang/p/6358681.html

總結(jié)

以上是生活随笔為你收集整理的JS原型继承和类式继承的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。