天天看點

ECMAScript對象基礎

1.global對象。這對象之是以特别就是因為它根本不存在!-_-。如果你聲明

var pointer=global;

報錯,找不到此對象。這是因為在ecmascript中,每個函數都某個對象的方法,我們用到的isnan(),isfinite(),parseint()和parsefloat()函數,看起來是獨立的函數,其實它們都是global對象的函數。

需要注意兩個用于處理url編碼的函數:

1)encodeuri()和decodeuri()  處理完整的uri

2)encodeuricomponent()和decodeuricomponent()     處理片段

2.其他對象如array,math,date對象,我發現比較有趣的是array的處理方式與ruby中array的處理方式幾乎一樣。

3.ecmascript對象的建立方式:

1)工廠方式:

ECMAScript對象基礎
ECMAScript對象基礎

function showcolor()

ECMAScript對象基礎

{

ECMAScript對象基礎

  alert(this.color)

ECMAScript對象基礎

}

ECMAScript對象基礎
ECMAScript對象基礎

function createcar(scolor, idoors, impg) 

ECMAScript對象基礎
ECMAScript對象基礎

    var otempcar = new object;

ECMAScript對象基礎

    otempcar.color = scolor;

ECMAScript對象基礎

    otempcar.doors = idoors;

ECMAScript對象基礎

    otempcar.mpg = impg;

ECMAScript對象基礎

    otempcar.showcolor =showcolor;

ECMAScript對象基礎

    return otempcar;

ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎

var ocar1 = createcar("red", 4, 23);

ECMAScript對象基礎

var ocar2 = createcar("blue", 3, 25);

ECMAScript對象基礎

這樣的方式看起來很奇怪,好象方法showcolor()不是對象的方法

2)構造函數方式:

ECMAScript對象基礎
ECMAScript對象基礎

function car(scolor, idoors, impg) 

ECMAScript對象基礎
ECMAScript對象基礎

    this.color = scolor;

ECMAScript對象基礎

    this.doors = idoors;

ECMAScript對象基礎

    this.mpg = impg;

ECMAScript對象基礎
ECMAScript對象基礎

    this.showcolor = function () 

ECMAScript對象基礎
ECMAScript對象基礎

        alert(this.color)

ECMAScript對象基礎

    };

ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎

var ocar1 = new car("red", 4, 23);

ECMAScript對象基礎

var ocar2 = new car("blue", 3, 25);

這樣的方式有個新問題,那就是每次構造一個對象都将重複生成函數showcolor,為每個對象建立獨立的函數版本。

3)原型方式

ECMAScript對象基礎
ECMAScript對象基礎

function car() 

ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎

car.prototype.color = "red";

ECMAScript對象基礎

car.prototype.doors = 4;

ECMAScript對象基礎

car.prototype.mpg = 23;

ECMAScript對象基礎

car.prototype.drivers = new array("mike", "sue");

ECMAScript對象基礎
ECMAScript對象基礎

car.prototype.showcolor = function () 

ECMAScript對象基礎
ECMAScript對象基礎

    alert(this.color);

ECMAScript對象基礎

};

ECMAScript對象基礎
ECMAScript對象基礎

var ocar1 = new car();

ECMAScript對象基礎

var ocar2 = new car();

ECMAScript對象基礎
ECMAScript對象基礎

ocar1.drivers.push("matt");

ECMAScript對象基礎
ECMAScript對象基礎

alert(ocar1.drivers);    //outputs "mike,sue,matt"

ECMAScript對象基礎

alert(ocar2.drivers);    //outputs "mike,sue,matt"

利用對象的prototype屬性來構造對象,但是有兩個問題:沒辦法使用構造函數傳參來生成對象;函數雖然被不同對象共享,但是屬性竟然也被共享,比如上面代碼中,ocar1的drivers屬性與ocar2的drivers屬性是同一個array對象。

4)為了解決上面問題,我們引入了構造函數/原型的混合方式:

ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎

    this.drivers = new array("mike", "sue");

ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎

alert(ocar2.drivers);    //outputs "mike,sue"

屬性通過構造函數方式,而函數則通過原型來生成,這就避免了純粹原型方式帶來的問題。但是函數放在對象的構造函數定義,讓習慣java,c++的人也感覺不爽,對象為什麼不能放在一塊地方定義呢?這就引出來了動态原型方式

5)動态原型方式:

ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎

    if (typeof car._initialized == "undefined") 

ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎

        car.prototype.showcolor = function () 

ECMAScript對象基礎
ECMAScript對象基礎

            alert(this.color);

ECMAScript對象基礎

        };

ECMAScript對象基礎
ECMAScript對象基礎

        car._initialized = true;

ECMAScript對象基礎

    }

ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎
ECMAScript對象基礎

通過引入_initialized 屬性,當第一次構造對象時生成方法showcolor ,再次生成對象時,此時的_initialized 已經是true,就避免了重複生成函數,屬性的定義和函數的定義都在構造函數内,也滿足了語義上的對象封裝概念。

我們應當盡量采用 構造函數/原型混合方式 和 動态原型方式 來建立ecmascript對象

文章轉自莊周夢蝶  ,原文釋出時間5.17