摘要:動物還有一個貓對象的構(gòu)造函數(shù)。這顯然會導(dǎo)致繼承鏈的紊亂明明是用構(gòu)造函數(shù)生成的,因此我們必須手動糾正,將對象的值改為。這是很重要的一點(diǎn),請務(wù)必注意如果替換了對象,下一步必然是為新的對象加上屬性,并將這個屬性指回原來的構(gòu)造函數(shù)。
原文鏈接
現(xiàn)在有一個"動物"對象的構(gòu)造函數(shù)。
function Animal() { this.species = "動物"; }
還有一個"貓"對象的構(gòu)造函數(shù)。
function Cat(name, color) { this.name = name; this.color = color; }
怎樣才能使"貓"繼承"動物"呢?
一、 構(gòu)造函數(shù)綁定第一種方法也是最簡單的方法,使用call或apply方法,將父對象的構(gòu)造函數(shù)綁定在子對象上,即在子對象構(gòu)造函數(shù)中加一行:
function Cat(name, color) { Animal.apply(this, arguments); // 加入這行代碼 this.name = name; this.color = color; } var cat1 = new Cat("大毛", "黃色"); console.log(cat1.species); // "動物"二、 prototype模式
第二種方法更常見,使用prototype屬性。
如果"貓"的prototype對象,指向一個Animal的實(shí)例,那么所有"貓"的實(shí)例,就能繼承Animal了。
Cat.prototype = new Animal(); Cat.prototype.constructor = Cat; var cat1 = new Cat("大毛", "黃色"); console.log(cat1.species); // "動物"
代碼的第一行,我們將Cat的prototype對象指向一個Animal的實(shí)例。它相當(dāng)于完全刪除了prototype對象原先的值,然后賦予一個新值。
任何一個prototype對象都有一個constructor屬性,指向它的構(gòu)造函數(shù)。
如果沒有Cat.prototype = new Animal();,Cat.prototype.constructor是指向Cat的;加了這行代碼之后,Cat.prototype.constructor就會指向Animal。
更重要的是,每一個實(shí)例也有一個constructor屬性,默認(rèn)調(diào)用prototype對象的constructor屬性。
因此,在運(yùn)行Cat.prototype = new Animal()這一行之后,cat1.constructor也指向Animal。
這顯然會導(dǎo)致繼承鏈的紊亂(cat1明明是用構(gòu)造函數(shù)Cat生成的),因此我們必須手動糾正,將Cat.prototype對象的constructor值改為Cat。這就是第二行代碼的作用。
這是很重要的一點(diǎn),請務(wù)必注意:
如果替換了prototype對象,下一步必然是為新的prototype對象加上constructor屬性,并將這個屬性指回原來的構(gòu)造函數(shù)。
o.prototype = {}; o.prototype.constructor = o;三、 直接繼承prototype
第三種方法是對第二種方法的改進(jìn)。
由于Animal對象中,不變的屬性都可以直接寫入Animal.prototype。所以,我們也可以讓Cat()跳過 Animal(),直接繼承Animal.prototype。
現(xiàn)在,我們先將Animal對象改寫:
function Animal() {} Animal.prototype.species = "動物"
然后,將Cat的prototype對象指向Animal的prototype對象,這樣就完成了繼承。
Cat.prototype = Animal.prototype; Cat.prototype.constructor = Cat; var cat1 = new Cat("大毛", "黃色") console.log(cat1.species) // "動物"
與前一種方法相比,這樣做的優(yōu)點(diǎn)是效率比較高(不用執(zhí)行和建立Animal的實(shí)例了),比較省內(nèi)存。
缺點(diǎn)是Cat.prototype和Animal.prototype現(xiàn)在指向了同一個對象,那么任何對Cat.prototype的修改,都會反映到Animal.prototype。
所以上述代碼實(shí)際上是有問題的,第二行Cat.prototype.constructor = Cat實(shí)際上把Animal.prototype.constructor也改成了Cat。
四、 利用空對象作為中介由于"直接繼承prototype"存在上述的缺點(diǎn),所以就有第四種方法,利用一個空對象作為中介。
var F = function () {} F.prototype = Animal.prototype; Cat.prototype = new F(); Cat.prototype.constructor = Cat;
F是空對象,所以幾乎不占內(nèi)存。這時,修改Cat的prototype對象,就不會影響到Animal的prototype對象。
我們將上面的方法,封裝成一個函數(shù),便于使用。
function extend(Child, Parent) { var F = function () {} F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; Child.uber = Parent.prototype; }
使用方法如下。
extend(Cat, Animal); var cat1 = new Cat("大毛", "黃色") console.log(cat1.species)
這個extend函數(shù),就是YUI庫如何實(shí)現(xiàn)繼承的方法。
另外,說明一點(diǎn),函數(shù)體最后一行Child.uber = Parent.prototype,意思是為子對象設(shè)一個uber屬性,這個屬性直接指向父對象的prototype屬性。(uber是一個德語詞,意思是"向上"、"上一層"。)這等于在子對象上打開一條通道,可以直接調(diào)用父對象的方法。這一行放在這里,只是為了實(shí)現(xiàn)繼承的完備性,純屬備用性質(zhì)。
五、 拷貝繼承上面是采用prototype對象,實(shí)現(xiàn)繼承。我們也可以換一種思路,純粹采用"拷貝"方法實(shí)現(xiàn)繼承。簡單說,如果把父對象的所有屬性和方法,拷貝進(jìn)子對象,不也能夠?qū)崿F(xiàn)繼承嗎?這樣我們就有了第五種方法。
首先,還是把Animal的所有不變屬性,都放到它的prototype對象上。
function Animal() {} Animal.prototype.species = "動物"
然后,再寫一個函數(shù),實(shí)現(xiàn)屬性拷貝的目的。
function extend(Child, Parent) { var p = Parent.prototype; var c = Child.prototype; for (var i in p) { c[i] = p[i] } c.uber = p; }
這個函數(shù)的作用,就是將Parent對象的prototype對象中的屬性,拷貝給Child對象的prototype對象。
使用方法
extend(Cat, Animal); var cat1 = new Cat("大毛", "黃色") console.log(cat1.species)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/81842.html
摘要:很多情況下,通常一個人類,即創(chuàng)建了一個具體的對象。對象就是數(shù)據(jù),對象本身不包含方法。類是相似對象的描述,稱為類的定義,是該類對象的藍(lán)圖或原型。在中,對象通過對類的實(shí)體化形成的對象。一類的對象抽取出來。注意中,對象一定是通過類的實(shí)例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了,離年底老媽老爸...
摘要:很多情況下,通常一個人類,即創(chuàng)建了一個具體的對象。對象就是數(shù)據(jù),對象本身不包含方法。類是相似對象的描述,稱為類的定義,是該類對象的藍(lán)圖或原型。在中,對象通過對類的實(shí)體化形成的對象。一類的對象抽取出來。注意中,對象一定是通過類的實(shí)例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了,離年底老媽老爸...
摘要:很多情況下,通常一個人類,即創(chuàng)建了一個具體的對象。對象就是數(shù)據(jù),對象本身不包含方法。類是相似對象的描述,稱為類的定義,是該類對象的藍(lán)圖或原型。在中,對象通過對類的實(shí)體化形成的對象。一類的對象抽取出來。注意中,對象一定是通過類的實(shí)例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了,離年底老媽老爸...
摘要:基于原型的面向?qū)ο笤诨谠偷恼Z言中如并不存在這種區(qū)別它只有對象不論是構(gòu)造函數(shù),實(shí)例,原型本身都是對象。允許動態(tài)地向單個的對象或者整個對象集中添加或移除屬性。為了解決以上兩個問題,提供了構(gòu)造函數(shù)創(chuàng)建對象的方式。 showImg(https://segmentfault.com/img/remote/1460000013229218); 一. 重新認(rèn)識面向?qū)ο?1. JavaScript...
摘要:基于原型的面向?qū)ο笤诨谠偷恼Z言中如并不存在這種區(qū)別它只有對象不論是構(gòu)造函數(shù),實(shí)例,原型本身都是對象。允許動態(tài)地向單個的對象或者整個對象集中添加或移除屬性。為了解決以上兩個問題,提供了構(gòu)造函數(shù)創(chuàng)建對象的方式。 showImg(https://segmentfault.com/img/remote/1460000013229218); 一. 重新認(rèn)識面向?qū)ο?1. JavaScript...
閱讀 3609·2021-11-15 11:37
閱讀 2974·2021-11-12 10:36
閱讀 4403·2021-09-22 15:51
閱讀 2381·2021-08-27 16:18
閱讀 881·2019-08-30 15:44
閱讀 2163·2019-08-30 10:58
閱讀 1769·2019-08-29 17:18
閱讀 3269·2019-08-28 18:25