Javascript中的幾種繼承方式對比分析_

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

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

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

6、，其實(shí)子類的實(shí)例man1,man2本身是一個(gè)完全空的對象，全部的屬性和方法都得去原型鏈上去找，因而找到的屬性方法都是同一個(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 這里子類的在構(gòu)造函數(shù)里利用了apply去調(diào)用父類的構(gòu)造函數(shù)，從而達(dá)到繼承父類屬性的效果，比挺直利用原型鏈要好的多，至少每個(gè)實(shí)例都有自己那一份資源，但是這種方法只能繼承父類的實(shí)例屬性，因而找不到say方法，為了繼承父類全部的屬性和方法，則就要修改原型鏈，從而引入了組合繼承方式。 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í)是掩蓋了原型屬性，但是并沒要掩蓋掉原型上的say方法（由于它們沒有），所以這里man1.say = man2.say依舊返回true，因而需要非常當(dāng)心沒有掩蓋掉的原型屬性，由于它是全部實(shí)例共有的。 4.寄生組合繼承 說實(shí)話我真不知道下面的這種形式叫這名字，但是它的確是最流行，最經(jīng)典的javascript的繼承方式。其實(shí)，只需要明白原型對象的結(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)造子類原型對象的方式上（a.和b.），這里用到了Object.creat(obj)方法，該方法會對傳入的obj對象進(jìn)行淺拷貝，類似于： function create(obj) function T(); T.prototype = obj; return new T(); 因此，a.會將子類的原型對象與父類的原型對象進(jìn)行很好的連接，而并不像一般的組合繼承那樣挺直對子類的原型進(jìn)行復(fù)制（如Mtotype = new P