Javascript中的幾種繼承方式對比分析__第1頁
Javascript中的幾種繼承方式對比分析__第2頁
Javascript中的幾種繼承方式對比分析__第3頁
Javascript中的幾種繼承方式對比分析__第4頁
Javascript中的幾種繼承方式對比分析__第5頁
免費預覽已結束,剩余3頁可下載查看

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

1、Javascript中的幾種繼承方式對比分析_ 下面我就為大家帶來一篇Javascript中的幾種繼承方式對比分析。我覺得挺不錯的,現在分享給大家,盼望能給大家一個參考。 開篇 從嚴格意義上說,javascript并不是一門真正的面對對象語言。這種說法緣由一般都是覺得javascript作為一門弱類型語言與類似java或c#之類的強型語言的繼承方式有很大的區分,因而默認它就是非主流的面對對象方式,甚至竟有許多書將其描述為非完全面對對象語言。其實個人覺得,什么方式并不重要,重要的是是否具有面對對象的思想,說javascript不是面對對象語言的,往往都可能沒有深化討論過javascript的繼承

2、方式,故特撰此文以供溝通。 為何需要利用javascript實現繼承 早期pc機器的性能的確不敢恭維,全部的壓力全在服務器端,客戶端掃瞄器純屬擺設。再加上那時流行的table布局以及電話線的上網方式導致掃瞄一個網頁非常的卡;而今互聯網時代飛速進展,個人電腦硬件得到了極大提升,客戶端掃瞄器的性能也非常的酸爽,web開發的模式也在悄悄轉變:服務端不再像以前那樣“辛苦”,取而代之的是盡可能的讓掃瞄器擔當更多的任務,如此一來,壓力分攤到每個客戶端上,企業不但節約成本,隨之也讓web前端開發變的更加好玩越來越多的前端框架層出不窮,甚至消失了很多前端的MVC框架。在這種背景下,javascript的角色已

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

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

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論