2016年1月27日 星期三

[筆記] JavaScript中的物件做為namespace的簡單運用

圖片來源:JavaScript 101

在前兩篇文章中我們說明了在JavaScript中如何建立物件([筆記] JavaScript中的物件建立(Object) - Part 1[筆記] JavaScript中的物件建立(Object) - Part 2),在這篇文章中,我們則是會簡單說明如何運用物件。

我們先來看這段程式碼,複習一下:


想想看,如果我執行這段程式的話,呼叫出來的結果會是「你好」還是「Hello」?為什麼呢?



答案是Hello。



為什麼呢?因為JavaScript在解析程式的時候,會先建立好定義的變項名稱(即,greet),並把它存在記憶體中,這時候greet的變項已經被建立,而值則是"undefined",接著JavaScript才會去逐行執行程式,greet的值就從undefined-->你好-->Hello,有了如下的變化,因此最後呼叫出來的結果會是Hello(參考:[筆記] 談談Javascript 中的 Hoisting)。

使用物件來達到namespace的效果


Namespace簡單來說是指一個包含了許多變項和函式的空間。

如同上述的例子,因為這兩個變項一樣都叫做greet,可是一個是中文,一個是英文,因為變項名稱一樣的關係,它並沒有辦法區分哪個給中文用的,哪個是給英文用的。在其它的程式語言中,有些可以透過namespace(名稱空間)來達到這樣的效果,可是在JavaScript中,並沒有Namespace這樣的功能,然而,我們可以透過物件的概念來達到類似namespace的效果(faking namespace)。

實際的做法上,我們可以寫出如下的程式碼:


我們把分別建立Chinese和English這兩個物件,然後在裡面我們可以套用一樣的變項名稱greet,在呼叫的時候,只需要選擇你是針對哪一個物件裡面的greet去做呼叫就可以了!

這樣做有一個很重要的好處,就是當我們很多人在編輯一份文件時,假設A同事建立了一個函式名稱叫SayHI,很不幸的,B同事也建立了一個名稱相同的函式或變項,這時候就麻煩了,因為後面的會把前面的給覆蓋掉,這時候如果我們能妥善利用JavaScript中物件來做為namespace的使用,就可以避免變項名稱重覆所造成的問題

其他應用物件時可能碰到的問題


這裡我們可能突然想到Hello只是英文裡面打招呼的一種方式,所以我們想要把greet放在greetings裡面,像是這樣子:



這樣做是很直覺的方式,但是結果會發生錯誤:



上面的訊息顯示"Cannot set property 'greet' of undefined",意思是說,我們想要設置一個屬性是greet,可是這個屬性要設置的地方目前還是"undefined"。

之所以會這樣,是因為我們還沒告訴JavaScript,english當中greetings這個屬性的值是什麼,所以greetings建立後,預設的值是undefined,也就是像這樣:


這也就是為什麼我們沒辦法建立"greet"這個屬性(property),因為english.greetings並不是一個物件!

為了要能夠順利執行程式,我們要先宣告english.greetings是一個物件,這樣它才可以建立「名稱─值」配對在裡面,也就是我們才能再進一步給它屬性。


這時候程式就能順利執行。

或者我們也可以利用object literal syntax的方式,像是這樣:


這樣子的話,程式一樣可以順利執行。
→回到此系列文章目錄

資料來源

Share:

0 意見:

張貼留言