Javascript中的幾種繼承方式對(duì)比分析_

1、Javascript中的幾種繼承方式對(duì)比分析_ 下面我就為大家?guī)?lái)一篇Javascript中的幾種繼承方式對(duì)比分析。我覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，盼望能給大家一個(gè)參考。 開(kāi)篇 從嚴(yán)格意義上說(shuō)，javascript并不是一門(mén)真正的面對(duì)對(duì)象語(yǔ)言。這種說(shuō)法緣由一般都是覺(jué)得javascript作為一門(mén)弱類(lèi)型語(yǔ)言與類(lèi)似java或c#之類(lèi)的強(qiáng)型語(yǔ)言的繼承方式有很大的區(qū)分，因而默認(rèn)它就是非主流的面對(duì)對(duì)象方式，甚至竟有許多書(shū)將其描述為非完全面對(duì)對(duì)象語(yǔ)言。其實(shí)個(gè)人覺(jué)得，什么方式并不重要，重要的是是否具有面對(duì)對(duì)象的思想，說(shuō)javascript不是面對(duì)對(duì)象語(yǔ)言的，往往都可能沒(méi)有深化討論過(guò)javascript的繼承

2、方式，故特撰此文以供溝通。 為何需要利用javascript實(shí)現(xiàn)繼承 早期pc機(jī)器的性能的確不敢恭維，全部的壓力全在服務(wù)器端，客戶(hù)端掃瞄器純屬擺設(shè)。再加上那時(shí)流行的table布局以及電話(huà)線(xiàn)的上網(wǎng)方式導(dǎo)致掃瞄一個(gè)網(wǎng)頁(yè)非常的卡；而今互聯(lián)網(wǎng)時(shí)代飛速進(jìn)展，個(gè)人電腦硬件得到了極大提升，客戶(hù)端掃瞄器的性能也非常的酸爽，web開(kāi)發(fā)的模式也在悄悄轉(zhuǎn)變：服務(wù)端不再像以前那樣“辛苦”，取而代之的是盡可能的讓掃瞄器擔(dān)當(dāng)更多的任務(wù)，如此一來(lái)，壓力分?jǐn)偟矫總€(gè)客戶(hù)端上，企業(yè)不但節(jié)約成本，隨之也讓web前端開(kāi)發(fā)變的更加好玩越來(lái)越多的前端框架層出不窮，甚至消失了很多前端的MVC框架。在這種背景下，javascript的角色已

3、經(jīng)肯定不是只做一些簡(jiǎn)潔的驗(yàn)證，發(fā)送一些懇求或者操作一些DOM，更多的需要擔(dān)當(dāng)類(lèi)似前端路由和業(yè)務(wù)層的角色，并且javascript需要做大量的規(guī)律性任務(wù)，這里面就包括前臺(tái)數(shù)據(jù)的抽離（即model），而只有運(yùn)用面對(duì)對(duì)象的思維才能很好的對(duì)抽離數(shù)據(jù)進(jìn)行處理，因此繼承就在這里顯得舉足輕重。 從一個(gè)簡(jiǎn)潔的需求開(kāi)頭 現(xiàn)從前臺(tái)抽離一個(gè)model名為Person，其有基本屬性name和age，默認(rèn)每個(gè)人都會(huì)說(shuō)話(huà)，因此將說(shuō)話(huà)的功能say放在了原型對(duì)象上，以供每個(gè)實(shí)例享用?，F(xiàn)在對(duì)于Man來(lái)說(shuō)，它需要繼承Person的基本屬性，并且在此基礎(chǔ)上添加自己特有的屬性。 function Person (name, age)

4、 = name; this.age = age; Ptotype.say = function() console.log(hello, my name is + ); ; function Man() /my own properties 下面介紹幾種主流的繼承方式。 1.原型鏈繼承 function Person (name, age) = name; this.age = age; Ptotype.say = function() console.log(hello, my name is +

5、); ; function Man() Mtotype = new Person(pursue); var man1 = new Man(); man1.say(); /hello, my name is pursue var man2 = new Man(); console.log(man1.say = man2.say);/true console.log( = );/true 這種繼承方式很挺直，為了獵取Person的全部屬性方法(實(shí)例上的和原型上的)，挺直將父類(lèi)的實(shí)例new Person(pursue)賦給了子類(lèi)的原型

6、，其實(shí)子類(lèi)的實(shí)例man1,man2本身是一個(gè)完全空的對(duì)象，全部的屬性和方法都得去原型鏈上去找，因而找到的屬性方法都是同一個(gè)。 所以挺直利用原型鏈繼承是不現(xiàn)實(shí)的。 2.利用構(gòu)造函數(shù)繼承 function Person (name, age) = name; this.age = age; Ptotype.say = function() console.log(hello, my name is + ); ; function Man(name, age) Person.apply(this, arguments); /Mtot

7、ype = new Person(pursue); var man1 = new Man(joe); var man2 = new Man(david); console.log( = );/false man1.say(); /say is not a function 這里子類(lèi)的在構(gòu)造函數(shù)里利用了apply去調(diào)用父類(lèi)的構(gòu)造函數(shù)，從而達(dá)到繼承父類(lèi)屬性的效果，比挺直利用原型鏈要好的多，至少每個(gè)實(shí)例都有自己那一份資源，但是這種方法只能繼承父類(lèi)的實(shí)例屬性，因而找不到say方法，為了繼承父類(lèi)全部的屬性和方法，則就要修改原型鏈，從而引入了組合繼承方式。 3.組合繼承

8、 function Person (name, age) = name; this.age = age; Ptotype.say = function() console.log(hello, my name is + ); ; function Man(name, age) Person.apply(this, arguments); Mtotype = new Person(); var man1 = new Man(joe); var man2 = new Man(david); console.log(man1.nam

9、e = );/false console.log(man1.say = man2.say);/true man1.say(); /hello, my name is joe 需要留意的是man1和man2的實(shí)例屬性其實(shí)是掩蓋了原型屬性，但是并沒(méi)要掩蓋掉原型上的say方法（由于它們沒(méi)有），所以這里man1.say = man2.say依舊返回true，因而需要非常當(dāng)心沒(méi)有掩蓋掉的原型屬性，由于它是全部實(shí)例共有的。 4.寄生組合繼承 說(shuō)實(shí)話(huà)我真不知道下面的這種形式叫這名字，但是它的確是最流行，最經(jīng)典的javascript的繼承方式。其實(shí)，只需要明白原型對(duì)象的結(jié)構(gòu)即可： funct

10、ion Person (name, age) = name; this.age = age; Ptotype.say = function() console.log(hello, my name is + ); ; function Man(name, age) Person.apply(this, arguments); Mtotype = Object.create(Ptotype);/a. Mtotype.constructor = Man;/b. var man1 = new Man(p

11、ursue); var man2 = new Man(joe); console.log(man1.say = man2.say); console.log( = ); 其實(shí)寄生組合繼承和上面的組合繼承區(qū)分僅在于構(gòu)造子類(lèi)原型對(duì)象的方式上（a.和b.），這里用到了Object.creat(obj)方法，該方法會(huì)對(duì)傳入的obj對(duì)象進(jìn)行淺拷貝，類(lèi)似于： function create(obj) function T(); T.prototype = obj; return new T(); 因此，a.會(huì)將子類(lèi)的原型對(duì)象與父類(lèi)的原型對(duì)象進(jìn)行很好的連接，而并不像一般的組合繼承那樣挺直對(duì)子類(lèi)的原型進(jìn)行復(fù)制（如Mtotype = new P