不可不知的JavaScript面向對象

編程語言 JavaScript 虐殺原形 技術 極客教程 2017-05-11

對象的創建:

1 創建一個面向對象

不可不知的JavaScript面向對象

缺點:當我們想創建多個面向對象的時候,重複代碼過多,需要封裝,所以有了工廠方法。

2 工廠方法

不可不知的JavaScript面向對象

缺點:無法識別創建的對象的類型。因為全部都是Object,沒有區分度,不像Date、Array等,因此出現了構造函數模式。

3 構造函數模式

不可不知的JavaScript面向對象


我們通過這二個方面來改變:

1. 函數名首字母大寫

這是為了區別於普通的函數,構造函數本身其實就是普通的函數,只是我們專門用它來實現了構造的功能,所以專門起了一個名字叫構造函數,任何函數都可以成為構造函數,這取決於你調用函數的方式,當使用了New的方式調用就成了構造函數。

2. New 關鍵字調用

調用函數的時候用了 New關鍵字,那麼New到底做了什麼?用不用New有什麼區別?再來看下面的例子

不可不知的JavaScript面向對象

我們會發現當用New去調用一個函數的時候,this的指向會不一樣。其實New主要做了下面這些事,不過下面寫的只是大概的行為,並不是內部源碼。

不可不知的JavaScript面向對象

函數構造模式存在的問題:

alert(p1.showName==p2.showName);//false

缺點:可見這兩個對象並不是共用一個方法,每new一次,系統都會新創建一個內存,這兩個對象各自有各自的地盤,但他們具有相同的功能,還不共用,肯定不是我們所希望的。所以就有了下一種方法,原型+構造模式

4 原型+構造模式

原型:每個函數都有一個prototype屬性,它是一個對象,也稱作原型對象,我們可以把方法和屬性寫在它上面(不過原型對象不僅僅有我們寫的屬性和方法,還有別的,下面會介紹),而通過這個函數創建出來的實例對象,都能共享這個原型對象下的方法和屬性。所以我們只需要把想要共享的東西放在函數的prototype下,不想共享的東西通過構造函數來創建就可以了。

看個栗子(原型+構造)

不可不知的JavaScript面向對象

測試為true,可見showName()方法是共享的,也就是說他們共用一個內存,更進一步的說它們存在引用關係,也就是說你更改了p1的showName也會影響p2的showName。

_proto_屬性:

同一個函數造出來的實例對象能共享這個函數的prototype下的方法和屬性,但是它是如何做到的呢?這裡要出場的就是_proto_屬性.

每個實例化對象都有_proto_屬性,它是一個指針,指向函數的prototype,也就是保存了它的地址。(JS中任何對象的值都是保存在堆內存中,我們聲明的變量只是一個指針,保存了這個對象的實際地址,所以有了地址就能找到對象),

所以總得來說,每個實例化對象都有_proto_屬性,保存了構造函數的原型對象的地址,通過這個屬性就可以擁有原型對象下的所有屬性和方法,_proto_屬性實際就是實例化對象和原型對象之間的連接

原型鏈:

每個函數都可以成為構造函數,每個函數都有原型對象,每個原型對象也可以是一個實例化對象,比如,你創建了一個函數fun,它是構造函數function的實例化對象,而function的原型對象,又是Object的實例對象。所以fun有個_proto_屬性可以訪問到function的原型對象,function原型對象也是個實例對象,也有個_proto_屬性,可以訪問到Object的原型對象,所以通過_proto_屬性,就形成了一條原型鏈。每個實例化對象都可以訪問到鏈子上方的方法和屬性,所以fun是可以訪問Object原型對象下的方法和屬性的。實際上所有對象都可以訪問到Object的原型對象。

原型鏈的訪問規則:先在自身的下面尋找,再去一級一級的往原型鏈上找。

如下:

不可不知的JavaScript面向對象

不可不知的JavaScript面向對象

原型對象:

原型對象下可能有三種屬性:

1 原型對象所帶方法和屬性

2 constructor

3_proto_屬性

constructor:構造函數屬性,每個函數的原型對象都有的默認屬性,指向函數。

每個實例化對象本身是沒有constructor屬性的,他們下面默認只有一個_proto_屬性,用來連接原型對象,而和構造函數本身是沒有直接的聯繫的。所以它的constructor是訪問的原型對象上的。所以當原型對象的constructor變化了,實例化對象的constructor也會改變。但是如果這個對象本身既是原型對象,又是實例化對象,那就擁有了constructor屬性,無需從原型對象上面訪問。**

看下面的例子,來驗證我們所說的:

不可不知的JavaScript面向對象

字面量法定義原型:

為了創建對象的代碼更方便,你一定見過這樣的代碼,就是字面量法:

不可不知的JavaScript面向對象

因此我們在寫的時候需要修正一下原型的指向:

不可不知的JavaScript面向對象

更多相關文章可以關注 頭條號:極客教程

相關書籍:


相關推薦

推薦中...