3.3 JavaScript的內存模型

JS的本質是一個對象，一個對象可以包含多個屬性，對象的屬性可以分為直接量和對象兩種類型，而對象又分為object對象和function對象兩種類型。

直接量和對象兩種類型的屬性在內存中的保存方式不同。直接量是直接用兩塊內存分別保存屬性名和屬性值，而對象需要三塊內存，分別保存屬性名、屬性地址和屬性內容，如圖3-11和圖3-12所示。

圖3-11 直接量屬性的內存模型圖

圖3-12 對象屬性的內存模型圖

對于對象類型的屬性來說，屬性名只是指向了保存對象的內存地址，而并不是指向實際的對象，從下面的例子就可以看出這一點。

    function F(){
        this.v = 1;
    }
    var f = new F();
    var f1 = f;
    console.log(f1.v);        //輸出1
    f1.v=2;
    console.log(f.v);         //輸出2
    f = null;
    console.log(f1.v);        //輸出2

在上述代碼中，首先使用function類型的F創(chuàng)建了object類型的f對象，這時變量f就會指向一個保存新創(chuàng)建的對象的地址。然后，將f賦值給f1變量的操作又將f1指向了創(chuàng)建出來的對象。此時，f和f1都指向了同一個對象，所以f1.v的值就是新創(chuàng)建對象中默認的1、通過f1將v的值修改為2之后，因為是修改了對象中屬性v的值，所以使用f.v輸出的也是2。最后將f設置為null之后，只是將其對應的地址設置為null，但并不影響對象的內容，通過f1還可以調用。整個流程的結構如圖3-13所示。

圖3-13 對象的內存處理流程

JS中對象類型的模型類似于Windows系統(tǒng)中的快捷方式。同一個內容，例如一份Excel報表，可以在不同的文件夾下有很多快捷方式，不過無論通過哪個快捷方式打開報表修改內容后，所有快捷方式所打開的報表都會被修改，因為它們所對應的本來就是同一個報表。當然，刪除其中一些快捷方式也不會影響報表的內容。Windows中不同的文件夾就相當于JS中的不同對象，所包含的文件相當于JS中的直接量，快捷方式相當于對象屬性名。這種類比雖然不夠嚴謹，但用于理解ES的對象結構和內存模型還是比較直觀的，讀者們可以細心體會一下。

另外，有些讀者可能會認為JS是腳本語言，是由解釋器執(zhí)行的，不應該有自己的內存模型，其實并不是這樣的。無論編譯型語言還是解釋型語言，它們的變量、函數(shù)、對象等數(shù)據(jù)都是保存在內存中的，使用時都需要使用變量名在指定地方（例如符號表）找到所對應的具體內容，然后再實際操作。只不過一個是由編譯器來做一個是由解釋器來做，一個是編譯為機器碼一個是直接執(zhí)行相應的操作而已（而且現(xiàn)在JS底層越來越偏向編譯執(zhí)行了）。對于解釋型的JS來說，其在內存中保存數(shù)據(jù)當然也需要有一定的規(guī)則，即本節(jié)所介紹的內存模型。