第一百零六節，JavaScript變量做用域及內存

JavaScript變量做用域及內存

 

學習要點：

 

1.變量及做用域

 

2.內存問題

 

JavaScript的變量與其餘語言的變量有很大區別。JavaScript變量是鬆散型的(不強制類型)本質，決定了它只是在特定時間用於保存特定值的一個名字而已。因爲不存在定義某個變量必需要保存何種數據類型值的規則，變量的值及其數據類型能夠在腳本的生命週期內改變。

 

一．變量及做用域

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沒有這些，只能是局部變量。

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運算符在檢查基本數據類型的時候很是好用，但檢測引用類型的時候，它就不是那麼好用了。一般，咱們並不想知道它是否是對象，而是想知道它究竟是什麼類型的對象。由於數組也是object，null也是Object等等。

這時咱們應該採用instanceof運算符來查看。

instanceof運算符，判斷一個對象數據是不是指定的類型，返回布爾值

var box = [1,2,3];
alert(box instanceof Array);                    //是不是數組
var box2 = {};
alert(box2 instanceof Object);                    //是不是對象
var box3 = /g/;
alert(box3 instanceof RegExp);                //是不是正則表達式
var box4 = new String('Lee');
alert(box4 instanceof String);                    //是不是字符串對象

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

 

6.執行環境及做用域

執行環境是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：當代碼在一個環境中執行時，就會造成一種叫作做用域鏈的東西。它的用途是保證對執行環境中有訪問權限的變量和函數進行有序訪問。做用域鏈的前端，就是執行環境的變量對象。

 

7.沒有塊級做用域

塊級做用域表示諸如if語句等有花括號封閉的代碼塊，因此，支持條件判斷來定義變量。

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;                                    //解除對象引用，等待垃圾收集器回收