JavaScript 面向對象編程學習筆記(一):封裝

最近在學習JavaScript面向對象編程,把學到的知識做一個歸納總結,方便以後隨時複習,也希望幫助到學習這部分知識的小夥伴!

一、創建對象的原始模式(通過對象字面量方式來創建對象)

我們把狗狗看成一個對象,它有名字和顏色兩個屬性:


接下來,我們需要根據上面這個原型對象的規格,生成兩個實例對象:

ok,以上就是簡單的封裝,把連個屬性封裝在一個對象裏面。不過,這樣的寫法有兩個缺點,一是如果需要生成N個實例,則學起來就比較麻煩。二是在實例和原型之間,看不出有任何的聯繫。

 

二、對上面原始模式的改進

我們可以先寫一個函數,解決代碼重複的問題。

然後生成實例對象,就相當於調用函數。

這種寫法仍然存在一個問題,那就是仍然看不出dog1和dog2之間的聯繫,看不出它們是同一原型對象的實例。

 

三、構造函數模式

所謂的構造函數,實際上就是一個普通那個函數,只是內部使用了this變量,對構造函數使用new運算符,就能生成實例,並且this變量會綁定在實例對象上。

比如,狗狗的原型對象現在可以這樣寫:

接下來就可以生成實例對象了:

此時,dog1和dog2會自動包含一個constructor屬性,指向它們的構造函數。

JavaScript還提供了一個instanceof運算符,用來測試一個對象在其原型鏈中是否存在一個構造函數的prototype屬性。

 

四、構造函數模式的問題

構造函數雖然很好用,但是存在一個耗費內存的問題。

我們現在爲dog對象添加一個不變的屬性type(種類)和一個方法eat(喫)。那麼原型對象就變成下面這種。

還是採用同樣的方法生成實例:

這樣寫表面上沒什麼問題,但是,實際上有一個很大的弊端,那就是對於每一個實例對象,type屬性和eat()方法都是一模一樣的內容,每一次生成一個實例,都必須爲重複的內容,多佔用一些內存。既不環保,也缺乏效率。

其實,可以讓type屬性和eat()方法在內存中只生成一次,然後所有實例都指向那個內存地址。

 

五、prototype模式

Javascript規定,每一個構造函數都有一個prototype屬性,指向另一個對象。這個對象的所有屬性和方法,都會被構造函數的實例繼

這就意味着我們可以把那些不變的屬性和方法,直接定義在prototype屬性上。

接下來,生成實例:

這時所有的type屬性和eat()方法,都是屬於同一個內存地址,都只想prototype對象,因此提高了運行效率。

 

六、prototype模式的驗證方法

6.1  isProtptypeOf()  用來驗證某個prototype對象和某個實例之間的關係

6.2  hasOwnPropety()  用來判斷一個屬性到底是本地屬性還是繼承自prototype對象的屬性

6.3in運算符  用來判斷某個實例是否含有某個屬性,不管是不是本地屬性

in運算符還可以用來遍歷某個對象的所有屬性。

運行結果:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章