JavaScript oop-1 window and global

我想要徹底紀錄並整理我這一兩年來對JS物件的瞭解,進一步重新思考對JS的認識…
實際上我對於目前以存在的JS函式原始碼也沒有徹底瞭解過的經驗,只有透過幾本書,跟幾篇網路上的文章整理出來的想法,
應該是破綻百出,所以…就慢慢來吧!

先列出幾篇當初試著在學得時候看的文章,大都是 GOOGLE 搜尋的前幾篇,當初的出發點是想認識JS如何實做 OOP,跟目前流行的 OOP 語言有什麼差異,

http://dean.edwards.name/weblog/2006/03/base/

http://phrogz.net/js/classes/OOPinJS.html

http://phrogz.net/js/classes/OOPinJS2.html

http://mckoss.com/jscript/object.htm

後面幾篇都是主要在介紹物件 prototype 這個屬性,第一篇比較特別是一個在實做目前流行的物件繼承的方式的一個基礎物件。

先來描述一下物件導向這件事,目前市面上看到物件導向的程式語言如Java、C++、PHP,等都是透過建立類別繼承等方式來作為基礎,而 js 則是透過一種比較非主流的方式來進行設計的,在 GOF 的書裡面有一個設計模式叫做 prototype 模式,好像就是在說這件事,不曉得是由於語言動態的風格以致於需要這樣設計還是另有因素,所以決定採用這種方式來實現物件導向的特性,由於目前所學習過的動態語言還不夠多,也沒有看過另外這樣實做的語言所以無法進行評論。

先來描述一下 js 在瀏覽器執行的一個環境好了,有些地方還沒有很懂,部份以推論的方式進行。

var a = 1;
alert(a);
alert(this.a);

所有JavaScript的函式與變數都是由物件提供與儲存於物件之中,如果你有疑惑覺得像上述兩個例子都沒有 x.y 呀,哪來的物件呢?其實都是 window 這個物件提供的,在瀏覽器在執行的全域程式中有一個特殊的情況,例如上例的變數 a 與函式 alert 都可以省略 window 也可以說是被自動加上 window .會有這種情形是因為當你在某個物件的scope時,你可以省略掉那個物件的而物件可以動態的建立或者透過一個函式來作為,而有一個奇怪的事是 this 這個關鍵字會指到window還不奇怪,因為目前 scope 都算是 window 但是 this.a 與 var a 會相通就有點奇怪了,因為在一般用 function prototype 產生出來的 object scope 就不會有這種共通現象,只有全域會有這種情況。

但是在沒有看瀏覽器 js 引擎初始化過程中,又無法瞭解全域外面到底有包覆了什麼比較能夠想到關聯的就是 with 關鍵字了,以下主要是想要推論出 js 物件繼承與 window 物件的關聯與最初的物件狀態,

function window() {
  with(window) {
    //start
    var a = 1;//因為with ,所以var定義會變成 window.a 又可以等於 this.a 因為this 指向 window 物件
    print a// window.a == 1 ; this.a == 1;
    b = 2;//未定義將宣告成 window.b = 2 ;此為較不明確的case<code>
    //end
  }
}
new window();

這個關鍵字在一般的情況不建議被使用,印象在JS the good parts 裡面有提到很容易造成空間域的不清與模糊,但是從這個使用情況來看,是最能模擬全域運作的情形的,但其實由於定義的順序,根本無法執行。

但在此需要特別注意一個特性,js有一個特性容易造成開發時的混淆,就是在變數未使用var宣告就賦值時會被初始化成全域變數,也可以說是將變數設為window的成員,而由於上述的範例 this 怎麼樣都會指向window所以也沒辦法猜測到底是這特性造成的還是with造成的…所以就可以模擬一部分瀏覽器執行期的環境。

如果將上述情況轉換成普通的object instance 就是將window換掉,來試試看推論是否正確。

function myobject() {
  with(myobject) {
    //start
    var a = 1;
    b = 2;
    //end
  }
}
new myobject();


下回會介紹function object的一些物件建立,再做進一步的探討~

自評…語無倫次…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *