天天看點

Javascript 面向對象程式設計

  初探

  我們知道Javascript中的變量定義基本如下:

  如果要用對象來寫的話,就是下面這個樣子:

  于是,我就可以這樣通路:

  關于函數,我們知道Javascript的函數是這樣的:

  于是,我們可以這麼幹:

  相信這些東西都比較簡單,大家都明白了。 可以看到Javascript對象函數是直接聲明,直接指派,直接就用了。runtime的動态語言。

  還有一種比較規範的寫法是:

  順便說一下,要删除對象的屬性,很簡單:

  上面的這些例子,我們可以看到這樣幾點:

Javascript的資料和成員封裝很簡單。沒有類完全是對象操作。純動态!

Javascript function中的this指針很關鍵,如果沒有的話,那就是局部變量或局部函數。

Javascript對象成員函數可以在使用時臨時聲明,并把一個全局函數直接賦過去就好了。

Javascript的成員函數可以在執行個體上進行修改,也就是說不同執行個體相同函數名的行為不一定一樣。

  屬性配置 – Object.defineProperty

  先看下面的代碼:

  下面就說說這些屬性配置是什麼意思。

writable:這個屬性的值是否可以改。

configurable:這個屬性的配置是否可以改。

enumerable:這個屬性是否能在for…in循環中周遊出來或在Object.keys中列舉出來。

value:屬性值。

get()/set(_value):get和set通路器。

  Get/Set 通路器

  關于get/set通路器,它的意思就是用get/set來取代value(其不能和value一起使用),示例如下:

  我們再看一個更為實用的例子——利用已有的屬性(age)通過get和set構造新的屬性(birth_year):

  這樣做好像有點麻煩,你說,我為什麼不寫成下面這個樣子:

  是的,你的确可以這樣的,不過通過defineProperty()你可以幹這些事:

  1)設定如 writable,configurable,enumerable 等這類的屬性配置。

  2)動态地為一個對象加屬性。比如:一些HTML的DOM對像。

  檢視對象屬性配置

  如果檢視并管理對象的這些配置,下面有個程式可以輸出對象的屬性和配置等東西:

  call, apply, bind 和 this

  關于Javascript的this指針,和C++/Java很類似。 我們來看個示例:(這個示例很簡單了,我就不多說了)

  但是在bind後,this指針,可能會有不一樣,但是因為Javascript是動态的。如下面的示例

  繼承 和 重載

  通過上面的那些示例,我們可以通過Object.create()來實際繼承,請看下面的代碼,Student繼承于Object。

  通用上面這個示例,我們可以看到,Person裡的屬性并沒有被真正複制到了Student中來,但是我們可以去存取。這是因為Javascript用委托實作了這一機制。其實,這就是Prototype,Person是Student的Prototype。

  當我們的代碼需要一個屬性的時候,Javascript的引擎會先看目前的這個對象中是否有這個屬性,如果沒有的話,就會查找他的Prototype對象是否有這個屬性,一直繼續下去,直到找到或是直到沒有Prototype對象。

  為了證明這個事,我們可以使用Object.getPrototypeOf()來檢驗一下:

  于是,你還可以在子對象的函數裡調用父對象的函數,就好像C++裡的 Base::func() 一樣。于是,我們重載hello的方法就可以使用父類的代碼了,如下所示:

  這個很強大吧。

  組合

  上面的那個東西還不能滿足我們的要求,我們可能希望這些對象能真正的組合起來。為什麼要組合?因為我們都知道是這是OO設計的最重要的東西。不過,這對于Javascript來并沒有支援得特别好,不好我們依然可以搞定個事。

  首先,我們需要定義一個Composition的函數:(target是作用于是對象,source是源對象),下面這個代碼還是很簡單的,就是把source裡的屬性一個一個拿出來然後定義到target中。

  有了這個函數以後,我們就可以這來玩了:

  Prototype 和 繼承

  我們先來說說Prototype。我們先看下面的例程,這個例程不需要解釋吧,很像C語言裡的函數指針,在C語言裡這樣的東西見得多了。

  那麼,我們能不能把這些東西封裝起來呢,我們需要使用prototype。看下面的示例:

  這就是prototype的用法,prototype 是javascript這個語言中最重要的内容。網上有太多的文章介始這個東西了。說白了,prototype就是對一對象進行擴充,其特點在于通過“複制”一個已經存在的執行個體來傳回新的執行個體,而不是建立執行個體。被複制的執行個體就是我們所稱的“原型”,這個原型是可定制的(當然,這裡沒有真正的複制,實際隻是委托)。上面的這個例子中,我們擴充了執行個體Cal,讓其有了一個operations的屬性和一個calculate的方法。

  這樣,我們可以通過這一特性來實作繼承。還記得我們最最前面的那個Person吧, 下面的示例是建立一個Student來繼承Person。

  相容性

  本文中的所有代碼都在Chrome最新版中測試過了。

  下面是一些函數,可以用在不相容ES5的浏覽器中:

  Object.create()函數

  defineProperty()函數

  keys()函數

  Object.getPrototypeOf() 函數

  bind 函數

  參考

W3CSchool

MDN (Mozilla Developer Network)

MSDN (Microsoft Software Development Network)