JavaScript的變數及範圍

標籤：

JavaScript 的變數與其他語言的變數有很大區別。

JavaScript 變數是鬆散型的(不強制類型)本質，決定了它只是在特定時間用於儲存特定值的一個名字而已。

由於不存在定義某個變數必須要儲存何種資料類型值的規則，變數的值及其資料類型可以在指令碼的生命週期內改變。

 

 

一、基本類型和參考型別的值

　　　　1、ECMAScript 變數可能包含兩種不同的資料類型的值：基本類型值和參考型別值。

　　　　2、基本類型值指的是那些儲存在棧記憶體中的簡單資料區段，即這種值完全儲存在記憶體中的一個位置。

　　　　3、而參考型別值則是指那些儲存在堆記憶體中的對象，意思是變數中儲存的實際上只是一個指標，這個指標指向記憶體中的另一個位置，該位置儲存對象。

　　　 4、將一個值賦給變數時，解析器必須確定這個值是基本類型值，還是參考型別值。

　　　　5、基本類型值：

　　　　　　　　1、有以下幾種：Undefined、Null、Boolean、Number 和 String。

　　　　　　　　2、這些類型在記憶體中分別佔有固定大小的空間，他們的值儲存在棧空間，我們通過按值來訪問的。

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

　　　　6、參考型別的值：

　　　　　　　　1、必須在堆記憶體中為這個值分配空間。由於這種值的大小不固定，因此不能把它們儲存到棧記憶體中。

　　　　　　　　2、但記憶體位址大小是固定的，因此可以將記憶體位址儲存在棧記憶體中。

　　　　　　　　3、這樣，當查詢參考型別的變數時，先從棧中讀取記憶體位址，然後再通過地址找到堆中的值。對於這種，我們把它叫做按引用訪問。

　　　　7、圖形解析：

　　　　　　　　

 

 

 

二、定義基本類型值和參考型別值的區別：

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

var box = new Object(); //建立參考型別box.name = ‘Lee‘; //新增一個屬性alert(box.name); //輸出/*如果是基本類型的值添加屬性的話，就會出現問題了。*/var box = ‘Lee‘; //建立一個基本類型box.age = 27; //給基本類型添加屬性alert(box.age); //undefined

 

 

 

 

三、基本類型值和參考型別值在賦值上的區別

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

　　　　　　1、基本類型

var box = ‘Lee‘;         //在棧記憶體產生一個 box ‘Lee‘var box2 = box;         //在棧記憶體再產生一個 box2 ‘Lee‘alert(box);alert(box2);//box2 是雖然是 box1 的一個副本，但它是完全獨立的。也就是說，兩個變數分別操作時互不影響。box2 = ‘kkkk‘;alert(box2)

                    

 

 

　　　　　　　　2、參考型別

/*    在參考型別中，box2 其實就是 box，因為他們指向的是同一個對象。如果這個對象中的    name 屬性被修改了，box2.name 和 box.name 輸出的值都會被相應修改掉了。*/var box = new Object(); //建立一個參考型別box.name = ‘Lee‘;         //新增一個屬性var box2 = box;         //把引用地址賦值給 box2alert(box2.name);

                 

 

 

 

 

四、傳遞參數

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

function box(num) {         //按值傳遞，傳遞的參數是基本類型    num += 10;                 //這裡的 num 是局部變數，全域無效    return num;}var num = 50;var result = box(num);alert(num);     //還是50alert(result);    //60/*以上的代碼中，傳遞的參數是一個基本類型的值。而函數裡的 num 是一個局部變數，和外面的 num 沒有任何聯絡。*/

function box(obj) { 　　　　　　　　　　//傳遞的參數是參考型別,但是是按值傳遞的，看似傳遞的是p對象的地址值，其實是將這個對象直接傳進去的    obj.name = ‘Lee‘;}var p = new Object();box(p);alert(p.name); 

function box(obj) {           obj.name = ‘Lee‘;    var obj = new Object(); //函數內部又建立了一個對象    obj.name = ‘Mr.‘; //並沒有替換掉原來的 obj}var p = new Object();box(p);alert(p.name);       

 

 

 

 

五、instanceof 檢測類型

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

var box = ‘Lee‘;alert(typeof box); //string

　　　　　　雖然 typeof 運算子在檢查基礎資料型別 (Elementary Data Type)的時候非常好用，但檢測參考型別的時候，它就不是那麼好用了。

　　　　　　通常，我們並不想知道它是不是對象，而是想知道它到底是什麼類型的對象。因為數組也是 object，null 也是 Object 等等。

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

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

var box = [1,2,3];alert(box instanceof Array);             //是否是數組var box2 = {};alert(box2 instanceof Object);     //是否是對象var box3 = /g/;alert(box3 instanceof RegExp);     //是否是Regexvar box4 = new String(‘Lee‘);alert(box4 instanceof String);     //是否是字串對象

 

 

 

 

 

六、執行環境及範圍

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

　　 全域執行環境是最外圍的執行環境。在 網頁瀏覽器中，全域執行環境被認為是 window對象。

　　 因此所有的全域變數和函數都是作為 window 對象的屬性和方法建立的。

　　var box = ‘blue‘; //聲明一個全域變數    function setBox() {        alert(box); //全域變數可以在函數裡訪問    }    setBox(); //執行函數        /*全域的變數和函數，都是 window 對象的屬性和方法*/    var box = ‘blue‘;    function setBox() {        alert(window.box); //全域變數即 window 的屬性    }    window.setBox(); //全域函數即 window 的方法

function setBox1(){        function setColor(){            return 322;        }        return 22;    }    //alert(window.setColor());        //結果報錯，因為setColor這個方法是不屬於全域的，無法直接調用

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

var box = ‘blue‘;function setBox() {    var box = ‘red‘;     //這裡是局部變數，出來就不認識了alert(box);}setBox();alert(box);var box = ‘blue‘;function setBox() {    box = ‘red‘;     //去掉var就變成全域變數了}setBox();alert(box);

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

var box=‘blue‘;function setBox(box){    alert(box);}setBox(‘red‘);  //redalert(box);        //blue

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

var box = ‘blue‘;function setBox() {    function setColor() {        var b = ‘orange‘;        alert(box);        alert(b);   //只能在這個函數裡面訪問，不能在外部，因為範圍在這裡    }    setColor();         //setColor()的執行環境在 setBox()內}setBox() 　　

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

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

   

 

 

 

 

 七、沒有塊級的範圍

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

if (true) { 　　　　　　　　//if 語句代碼塊沒有局部範圍    var box = ‘Lee‘;}alert(box);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); //報錯/*非常不建議不使用 var 就初始設定變數，因為這種方法會導致各種意外發生。所以初始設定變數的時候一定要加上 var。*/

var box = ‘blue‘;function getBox() {    return box;             //代表全域 box}                             //如果加上函數體內加上 var box = ‘red‘     那麼最後傳回值就是 redalert(getBox());           

 

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

 

 

 

 

八、記憶體問題

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

　　 而 JavaScript 則不需要這樣，它會自行管理記憶體配置及無用記憶體的回收。

　　JavaScript 最常用的垃圾收集方式是標記清除。垃圾收集器會在啟動並執行時候給儲存在記憶體中的變數加上標記。然後，它會去掉環境中正在使用變數的標記，而沒有被去掉標記的變數將被視為準備刪除的變數。

　　最後，垃圾收集器完成記憶體清理工作，銷毀那些帶標記的值並回收他們所佔用的記憶體空間。

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

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

var o = {　　name : ‘Lee‘};o = null; //解除對象引用，等待垃圾收集器回收

 

 

 

 

 

九、全域變數和局部變數

<script type="text/javascript">    for(var x = 0;x<3;x++){        //在指令碼片段中定義的變數，是全域變數        document.write("x="+x);    }    document.write("X======="+x);//在java中x變數已經釋放，但在js中還可以使用x變數</script><script type="text/javascript">    document.write("X======="+x);//在java中x變數已經釋放，但在js中還可以使用x變數，甚至在這裡也可以訪問的到</script>

function show(){    var x = 8;//這裡是局部變數}document.write("X======="+x);//這裡訪問不到函數裡的局部變數

var x = 4;//全域的變數function show(x){//局部的變數    x = 8;}show(x);document.write("X======="+x);//結果還是4  

 

JavaScript的變數及範圍