js中變數、範圍及記憶體

標籤：

一．變數及範圍

1.基本類型和參考型別的值

ECMAScript變數可能包含兩種不同的資料類型的值：基本類型值和參考型別值。基本類型值指的是那些儲存在棧記憶體中的簡單資料區段，即這種值完全儲存在記憶體中的一個位置。而參考型別值則是指那些儲存在堆記憶體中的對象，意思是變數中儲存的實際上只是一個指標，這個指標指向記憶體中的另一個位置，該位置儲存對象。

將一個值賦給變數時，解析器必須確定這個值是基本類型值，還是參考型別值。基本類型值有以下幾種：Undefined、Null、Boolean、Number和String。這些類型在記憶體中分別佔有固定大小的空間，他們的值儲存在棧空間，我們通過按值來訪問的。

PS：在某些語言中，字串以對象的形式來表示，因此被認為是參考型別。ECMAScript放棄這一傳統。

如果賦值的是參考型別的值，則必須在堆記憶體中為這個值分配空間。由於這種值的大小不固定，因此不能把它們儲存到棧記憶體中。但記憶體位址大小的固定的，因此可以將記憶體位址儲存在棧記憶體中。這樣，當查詢參考型別的變數時，先從棧中讀取記憶體位址，然後再通過地址找到堆中的值。對於這種，我們把它叫做按引用訪問。

 

 

2.動態屬性

定義基本類型值和參考型別值的方式是相似的：建立一個變數並為該變數賦值。但是，當這個值儲存到變數中以後，對不同類型值可以執行的操作則大相徑庭。

var box = new Object(); //建立參考型別

box.name = ‘Lee‘; //新增一個屬性

alert(box.name); //輸出

 

如果是基本類型的值添加屬性的話，就會出現問題了。

var box = ‘Lee‘; //建立一個基本類型

box.age = 27; //給基本類型添加屬性

alert(box.age); //undefined

 

3.複製變數值

在變數複製方面，基本類型和參考型別也有所不同。基本類型複製的是值本身，而參考型別複製的是地址。

var box = ‘Lee‘; //在棧記憶體產生一個box ‘Lee‘

var box2 = box; //在棧記憶體再產生一個box2 ‘Lee‘

 

box2是雖然是box1的一個副本，但從圖示可以看出，它是完全獨立的。也就是說，兩個變數分別操作時互不影響。

var box = new Object(); //建立一個參考型別

box.name = ‘Lee‘; //新增一個屬性

var box2 = box; //把引用地址賦值給box2

 

 

在參考型別中，box2其實就是box，因為他們指向的是同一個對象。如果這個對象中的name屬性被修改了，box2.name和box.name輸出的值都會被相應修改掉了。

 

4.傳遞參數

ECMAScript中所有函數的參數都是按值傳遞的，言下之意就是說，參數不會按引用傳遞，雖然變數有基本類型和參考型別之分。

function box(num) { //按值傳遞，傳遞的參數是基本類型

num += 10; //這裡的num是局部變數，全域無效

return num;

}

var num = 50;

var result = box(num);

alert(result); //60

alert(num); //50

 

PS：以上的代碼中，傳遞的參數是一個基本類型的值。而函數裡的num是一個局部變數，和外面的num沒有任何聯絡。

 

下面給出一個參數作為參考型別的例子。

function box(obj) { //按值傳遞，傳遞的參數是參考型別

obj.name = ‘Lee‘;

}

 

var p = new Object();

box(p);

alert(p.name);

 

PS：如果存在按引用傳遞的話，那麼函數裡的那個變數將會是全域變數，在外部也可以訪問。比如PHP中，必須在參數前面加上&符號表示按引用傳遞。而ECMAScript沒有這些，只能是局部變數。可以在PHP中瞭解一下。

PS：所以按引用傳遞和傳遞參考型別是兩個不同的概念。

 

function box(obj) {

obj.name = ‘Lee‘;

var obj = new Object(); //函數內部又建立了一個對象

obj.name = ‘Mr.‘; //並沒有替換掉原來的obj

}

 

最後得出結論，ECMAScript函數的參數都將是局部變數，也就是說，沒有按引用傳遞。

 

5.檢測類型

要檢測一個變數的類型，我們可以通過typeof運算子來判別。諸如：

var box = ‘Lee‘;

alert(typeof box); //string

 

雖然typeof運算子在檢查基礎資料型別 (Elementary Data Type)的時候非常好用，但檢測參考型別的時候，它就不是那麼好用了。通常，我們並不想知道它是不是對象，而是想知道它到底是什麼類型的對象。因為數組也是object，null也是Object等等。

這時我們應該採用instanceof運算子來查看。

var box = [1,2,3];

alert(box instanceof Array); //是否是數組

var box2 = {};

alert(box2 instanceof Object); //是否是對象

var box3 = /g/;

alert(box3 instanceof RegExp); //是否是Regex

var box4 = new String(‘Lee‘);

alert(box4 instanceof String); //是否是字串對象

 

PS：當使用instanceof檢查基本類型的值時，它會返回false。

 

5.執行環境及範圍

執行環境是JavaScript中最為重要的一個概念。執行環境定義了變數或函數有權訪問的其他資料，決定了它們各自的行為。

全域執行環境是最外圍的執行環境。在Web瀏覽器中，全域執行環境被認為是window對象。因此所有的全域變數和函數都是作為window對象的屬性和方法建立的。

var box = ‘blue‘; //聲明一個全域變數

function setBox() {

alert(box); //全域變數可以在函數裡訪問

}

setBox(); //執行函數

 

全域的變數和函數，都是window對象的屬性和方法。

var box = ‘blue‘;

function setBox() {

alert(window.box); //全域變數即window的屬性

}

window.setBox(); //全域函數即window的方法

 

PS：當執行環境中的所有代碼執行完畢後，該環境被銷毀，儲存在其中的所有變數和函數定義也隨之銷毀。如果是全域環境下，需要程式執行完畢，或者網頁被關閉才會銷毀。

PS：每個執行環境都有一個與之關聯的變數對象，就好比全域的window可以調用變數和屬性一樣。局部的環境也有一個類似window 的變數對象，環境中定義的所有變數和函數都儲存在這個對象中。(我們無法訪問這個變數對象，但解析器會處理資料時後台使用它)

 

函數裡的局部範圍裡的變數替換全域變數，但範圍僅限在函數體內這個局部環境。

var box = ‘blue‘;

function setBox() {

var box = ‘red‘; //這裡是局部變數，出來就不認識了

alert(box);

}

setBox();

alert(box);

 

通過傳參，可以替換函數體內的局部變數，但範圍僅限在函數體內這個局部環境。

var box = ‘blue‘;

function setBox(box) { //通過傳參，替換了全域變數

alert(box);

}

setBox(‘red‘);

alert(box);

 

函數體內還包含著函數，只有這個函數才可以訪問內一層的函數。

var box = ‘blue‘;

function setBox() {

function setColor() {

var b = ‘orange‘;

alert(box);

alert(b);

}

setColor(); //setColor()的執行環境在setBox()內

}

setBox();

 

PS：每個函數被調用時都會建立自己的執行環境。當執行到這個函數時，函數的環境就會被推到環境棧中去執行，而執行後又在環境棧中彈出(退出)，把控制權交給上一級的執行環境。

PS：當代碼在一個環境中執行時，就會形成一種叫做範圍鏈的東西。它的用途是保證對執行環境中有存取權限的變數和函數進行有序訪問。範圍鏈的前端，就是執行環境的變數對象。

 

 

6.沒有塊級範圍

塊級範圍表示諸如if語句等有花括弧封閉的代碼塊，所以，支援條件判斷來定義變數。

if (true) { //if語句代碼塊沒有局部範圍

var box = ‘Lee‘;

}

alert(box);

 

for迴圈語句也是如此

for (var i = 0; i < 10; i ++) { //沒有局部範圍

var box = ‘Lee‘;

}

alert(i);

alert(box);

 

var關鍵字在函數裡的區別

function box(num1, num2) {

var sum = num1 + num2; //如果去掉var就是全域變數了

return sum;

}

alert(box(10,10));

alert(sum); //報錯

 

PS：非常不建議不使用var就初始設定變數，因為這種方法會導致各種意外發生。所以初始設定變數的時候一定要加上var。

 

一般確定變數都是通過搜尋來確定該標識符實際代表什麼。

var box = ‘blue‘;

function getBox() {

return box; //代表全域box

} //如果加上函數體內加上var box = ‘red‘

alert(getBox()); //那麼最後傳回值就是red

PS：變數查詢中，訪問局部變數要比全域變數更快，因為不需要向上搜尋範圍鏈。

二．記憶體問題

JavaScript具有自動垃圾收集機制，也就是說，執行環境會負責管理代碼執行過程中使用的記憶體。其他語言比如C和C++，必須手工跟蹤記憶體使用量情況，適時的釋放，否則會造成很多問題。而JavaScript則不需要這樣，它會自行管理記憶體配置及無用記憶體的回收。

JavaScript最常用的垃圾收集方式是標記清除。垃圾收集器會在啟動並執行時候給儲存在記憶體中的變數加上標記。然後，它會去掉環境中正在使用變數的標記，而沒有被去掉標記的變數將被視為準備刪除的變數。最後，垃圾收集器完成記憶體清理工作，銷毀那些帶標記的值並回收他們所佔用的記憶體空間。

垃圾收集器是周期性啟動並執行，這樣會導致整個程式的效能問題。比如IE7以前的版本，它的垃圾收集器是根據記憶體配置量啟動並執行，比如256個變數就開始運行垃圾收集器，這樣，就不得不頻繁地運行，從而降低的效能。

一般來說，確保佔用最少的記憶體可以讓頁面獲得更好的效能。那麼最佳化記憶體的最佳方案，就是一旦資料不再有用，那麼將其設定為null來釋放引用，這個做法叫做解除引用。這一做法適用於大多數全域變數和全域對象。

var o = {

name : ‘Lee‘

};

o = null; //解除對象引用，等待垃圾收集器回收

js中變數、範圍及記憶體