當javaScript從入門到提高前需要注意的細節：對象部分

最近看了一個文章，樓主抱怨說javaScript不是标準的面向對象語言，最多勉強算是基于面向對象的語言。這樣的說法也是非常有現實的市場的，主要是基于class的程式設計語言影響力太大了，C++、java、C#哪個不是名門之後，搞得大家現在一說面向對象就是必須有class關鍵字了。

面向對象的開發程式設計隻是一種程式設計的思想，和對程式設計的指導意見（設計模式更是一種經驗的歸納和名稱，絕對不是聖經來的）。面向對象的思想主要是建議開發人員注意幾個事項：盡可能的實作代碼重用（過程性的函數也是代碼重用來的），盡可能的為特定的個體設計獨特的資料類型，在這個獨特的類型中包含了這個類型所有自我完成的運算，但是僅僅将需要調用者關心的資料和函數公開，其他都屏蔽掉。

具體一個語言是怎麼實作面向對象的，和面向對象的開發準則并沒有具體的約定。由于曆史原因，我們大部分的面向對象程式設計選擇了C++風格的靜态CLASS方式，是以我們很多人就習慣上了基于CLASS的面向對象程式設計方式而已。而且CLASS從C++開始到java再到C#，編譯器廠商為了讨好開發人員再文法糖上面下了極大的功夫，推陳出新了衆多用于描述對象封裝，繼承，多态應用的關鍵字，讓我們開發效率極大的提高，自然我們也就喜歡上了CLASS的程式設計，也自然的認可了CLASS作為面向對象開發的标準或代言人。

既然我們開始了解了面向對象的程式設計不僅僅有基于CLASS的方式，還有其他的各種方式，比如VB是基于IMPLEMENTS的實作方式（具體記不清了，太晚了，懶得bing了），而javaScript是基于PROTOTYPE來實作的。

javaScript的特殊在于，其沒有類，所有的一切都是執行個體（這裡我特别的用了執行個體而不是對象，就是擔心說都是對象其實是不嚴謹的），從類型來觀察，javaScript提供了6種我們可以通路的基本資料類型：undefined、null、boolean、string、number、object，以下的代碼在null的時候有點另人疑惑，其他都蠻正常，原因是在javaScript中null被定義為了Null。

alert(typeof undefined);  

alert(typeof null);  

alert(typeof 123);  

alert(typeof 123.45);  

alert(typeof true);  

alert(typeof false);  

alert(typeof "Hello");  

alert(typeof {}); 

說到Null，我們知道在javaScript中還有String、Date、Number、Boolean、Object、Function，在java或C#中，我們可以判斷出這些應該是對象，而且是對基本資料類型的隐射，但是在javaScript中，那就完全不同

alert(typeof Number);  

alert(typeof String);  

alert(typeof Date);  

alert(typeof Boolean);  

alert(typeof Function);  

alert(typeof Object); 

以上得到的結果全是function。這點就告訴我們兩個基本事實：1 javaScript中隻有object是對象資料類型（就這麼唯一一個）；2 對象和函數直接的确有着非常暧昧的關系。

如果對以上的函數采用new運算符，我們得到的結果是

alert(typeof new Number());  

alert(typeof new String());  

alert(typeof new Date());  

alert(typeof new Boolean());  

alert(typeof new Function());  

alert(typeof new Object()); 

除了Function之外，其他都傳回對象。現在我們開始進入主題。

在javaScript中最簡單的對象定義就是使用字面量進行定義

var obj = {};  

var Poker = {  

    Title: "K",  

    Style: "spade",  

    Value: 13  

}; 

上面這段代碼，我們可以得到兩個對象。要記住在javaScript中，不采用CLASS來抽象對象，所有的一切值都是執行個體的。我們不需要任何CLASS就可以得到一個對象，使用{}就是聲明了一個對象執行個體。在這樣的一個直接對象中所定義的值預設都是公開的，試圖采用var在字面量的對象中聲明一個私有屬性是不可以的。需要說明下，javaScript對象是一個key-value的集合，我們說的屬性其實是一個key，正确的将應該是我們在Poker中定義了3個可便利的Key：Title，Style和Value。講屬性那是友善使用C#、Java的程式員了解。 javaScript對面向對象的封裝和CLASS的不同，他沒有提供public和private等通路修飾符。如果我們使用現代的浏覽器，比如IE9，Chrome等支援ECMAScript5 的浏覽器，那麼我們可以定義不可周遊的key，并且可以為key來定義set和get，并且可以約定一個key隻讀，好像已經接近CLASS的習慣了，如下是一個demo

    Value: 13,  

    State: 1  

};  

Object.defineProperties(  

Poker,  

{  

    "backgroundImg": {  

        value: "images\\common\\hide.png",  

        enumerable: false, //不可以for 周遊  

        writable: false//隻讀  

    },  

    "forgroundImg": {  

        value: "images\\spade\\K.png",  

    Img: {  

        get: function() {  

            return this.State == 0 ? this.backgroundImg : this.forgroundImg;  

        },  

        enumerable: true 

    }  

}  

);  

alert(Poker.Img); //images\\spade\\K.png  

for (var key in Poker) {  

    alert(key); //backgroundImg 和  forgroundImg無法被周遊到  

alert(Poker.backgroundImg); //依然可以通路  

Poker.backgroundImg = "XXX";  

alert(Poker.backgroundImg); //依然是images\\common\\hide.png 

但使用字面量直接定義對象的話，至少還有兩個麻煩，1是重用比較麻煩，2是對私有變量的封裝還是不給力。雖然說字面量建立的對象也是可以繼承的比如

var PokerA = {  

    Title: "A",  

    Value: 14,  

    __proto__: Poker  

var Poker10 = {  

    Title: "10",  

    Style: "club",  

    Value: 10,  

alert(PokerA.Title); //A  

alert(PokerA.State); //1  

alert(Poker10.Title); //10  

alert(Poker10.State); //1  

//在IE8-通路  

alert(PokerA.__proto__.State);  

alert(Poker10.__proto__.State); 

因為javaScript中字面量的對象都是執行個體，我們不管這樣的繼承是不是比較惡心難看，但至少我們可以認識到，Poker對象（執行個體是一直存在的），每一個繼承者都需要一個Poker的執行個體空間

Poker.State = 3;  

PokerA.State = 0;  

alert(PokerA.State); //0  

alert(Poker10.State); //3  

alert(Poker.State); //3 

以下的代碼更是明确的告訴我們，Poker的執行個體中this指向的是子類（當然你承認這個是子類的話）

    State: 1,  

    toString: function() {  

        alert(this.Style + this.Title + ":" + this.Value);  

PokerA.toString(); // spadeA: 14  

Poker10.toString(); //club10:10 

同時，我們可以了解到一個繼承鍊的事情是：當一個被調用的key在目前對象沒有定義的時候，會順着繼承鍊向上去找，直到找到第一個key存在為止（object自身的toString在這個demo中被無視了），如果都沒有就是undefined了。你可以認為是CLASS中的重寫來實作多态吧，我想可以這麼說。

一般來講，我不建議在字面量（我用這個詞非常不舒服，我喜歡叫直接對象）用來繼承，直接對象最有價值的用法就是作為參數或什麼的用一次，簡單高效，看的明白。如果要合理的使用記憶體，靈活的建立對象，那必須用function才比較爽。

var Poker = function(style, title, value, state) {  

    this.Title = title;  

    this.Style = style;  

    this.Value = value;  

    this.State = arguments[3] === undefined ? 0 : state;  

    var backgroundImg = "images\\common\\hide.png";  

    var forgroundImg = "images\\spade\\" + title + ".png";  

    this.Img = (function(x) {  

        return x == 0 ? backgroundImg : forgroundImg;  

    } (this.State));  

    this.toString = function() {  

        return this.Style + this.Title + ":" + this.Value  

var Poker10 = new Poker("spade", "10", "10");  

var PokerA = new Poker("spade", "A", "14", 1);  

alert(PokerA.toString()); // spadeA: 14  

alert(Poker10.toString()); //club10:10  

alert(Poker10.State); //0  

alert(PokerA.Img); //images\spade\A.png  

alert(Poker10.Img); //images\common\hide.png 

上面的代碼顯然舒适多了，而且容易了解。我不反對吧Poker這個函數叫構造函數，事實上他也的确幫助我們構造了一個Poker對象，不過由于javaScript沒有CLASS的概念，是以我更喜歡傾向于說：Poker函數幫助我們構造了一個以Poker為原型的對象。叫起來非常的繞口，那就還是說是構造函數吧。

無論是直接對象還是函數構造得到的對象，對于javaScript來講都是動态的，這個執行個體可以動态的添加key。

看看以下代碼，在構造完成了Pkoner10和PokerA之後，我們在Poker的原型上建立了一個新的函數createDom，這個函數依然對Pkoner10和PokerA是有效的。

Poker.prototype.createDom = function() {  

    return $("<img id=" + this.Style + this.Title + ">");  

$(  

function() {  

    PokerA.createDom().appendTo("body");  

    Poker10.createDom().appendTo("body");  

); 

不過你要記得，function新加的key必須加在prototype上，以下代碼就是錯誤的

Poker.insert = function(box, poker) {  

    poker.appentTo(box);  

PokerA.insert("body", PokerA.createDom()); //錯誤了 

原因我估計是這樣的，function當函數用的時候就是函數，當用new構造的時候，編譯器将this指向的key防止到了function的prototype（原型）上，以下算是一個證明吧

alert(Poker.prototype.constructor === Poker); //true  

alert(PokerA.constructor === Poker); //true  

alert(PokerA.createDom === PokerA.__proto__.createDom); //true  

alert(PokerA.__proto__.constructor === Poker.prototype.constructor); //true 

說到key了，正好說下javaScript中的數組，數組一般在靜态語言的概念中式連續配置設定的一段記憶體，大小是固定的。不過javaScript中的數組我看其實是對象的變形

var arr = [];  

for (var i = 0; i < 5; i++) {  

    arr[i] = i;  

arr.push(99);  

for (var index in arr) {  

    alert(index); // 0 1 2 3 4 5  

} 

最後的for得到的不是數組的值，而是數組的index，是以我們可以這樣求值

    alert(arr[index]);  

是以，估計arr[i] = i是動态的添加了一個屬性，并指派而已啦。

還是回到構造函數來說，一般看來，為了符合面向對象的一個程式設計意思：對象是自己的一組資料的集合，是以我們一般在構造函數中定義對象的屬性（也就是資料），資料由構造函數的參數提供，而對象的方法在外部用函數編寫，并且指向這個構造的原型。原因是在javaScript中字面量的對象沒有property……

這個property就是function構造出的執行個體，如果把方法直接寫在function上，那就是這個function的靜态成員了，估計可以這麼說，一下是一個demo

function Poker(style, title, value) {  

Poker.max = function(Poker1, Poker2) {  

    var p;  

    for (var i = 0; i < arguments.length; i++) {  

        if (arguments[i] instanceof Poker) {  

            if (typeof p == "undefined") {  

                p = arguments[i];  

            }  

            else {  

                p = p.Value > arguments[i].Value ? p : arguments[i];  

        }  

    return p;  

var p = Poker.max(new Poker("club", "K", 13),  

            new Poker("diamond", "A", 14),  

            "",  

            new Poker("diamond", "10", 10));  

alert(p.Style + p.Title + "[" + p.Value + "]"); // diamondA[14] 

那麼函數，構造函數，對象之間的原型關系到底怎麼樣的呢？下面的代碼描述了這些關系

alert(Poker.constructor); //function Function() { [native code] }  

alert(new Poker().constructor); //function Poker(style, title, value) {  

                                //            this.Style = style;  

                                //            this.Title = title;  

                                //            this.Value = value;  

                                //        }  

alert(Poker.constructor.prototype); //function Empty() {}  

alert(Poker.prototype == new Poker().constructor.prototype); // true  

alert(Poker.constructor.prototype == new Poker().constructor.prototype); // false  

alert(new Poker().propertye); //undefined 

函數的構造函數是Function對象；

函數的對象化（函數建立的對象）的構造函數是function的定義；

函數的構造函數的原型是一個空函數；

函數的原型和函數建立的對象的構造函數的原型相等（是以對象是函數構造出來的）；

函數的構造函數的原型和函數的對象化的構造函數的原型不同；

對象沒有原型可以直接通路（這個和字面量的對象一樣的）；

上面的文字看上去和繞密碼一樣的，但多念念就明白了……

是以證明前面的說法：如果需要函數的成員讓執行個體通路，要麼加到函數代碼裡面，要麼在外面加到函數的原型上去

本文轉自shyleoking 51CTO部落格，原文連結:http://blog.51cto.com/shyleoking/803072