js變數、範圍及記憶體詳解

js變數、範圍及記憶體詳解

 基本類型值有：undefined，NUll，Boolean，Number和String，這些類型分別在記憶體中佔有固定的大小空間，他們的值儲存在棧空間，我們通過按值來訪問的。

（1）實值型別：數值、布爾值、null、undefined。
（2）參考型別：對象、數組、函數。

如果賦值的是參考型別的值，則必須在堆記憶體中為這個值分配空間。由於這種值的大小不固定（對象有很多屬性和方法），因此不能把他們儲存到棧記憶體中。但記憶體位址大小是固定的，因此可以將記憶體位址儲存在棧記憶體中。

1 2 3 4 5 6

<script type="text/javascript”> var box = new Object(); //建立一個參考型別 var box = "lee";  //基本類型值是字串 box.age = 23;  //基本類型值添加屬性很怪異，因為只有對象才可以添加屬性。 alert(box.age); //不是參考型別，無法輸出； </script>

簡而言之，堆記憶體存放引用值，棧記憶體存放固定類型值。

1 2 3 4 5 6 7 8

<script type="text/javascript">   var man = new Object();//man指向了棧記憶體的空間地址   man.name = "Jack";   var man2 = man;//man2獲得了man的指向地址      alert(man2.name);//兩個都彈出Jack   alert(man.name); </script>

複製變數值

再看下面這個例子：

1 2 3 4 5 6 7 8 9

<script type="text/javascript">   var man = new Object();//man指向了棧記憶體的空間地址   man.name = "Jack";   var man2 = man;//man2獲得了man的指向地址      man2.name = "ming";//因為他們都指向同一個object，同一個name，不管修改誰，大家都修改了   alert(man2.name);//兩個都彈出ming   alert(man.name); </script>

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

傳遞參數

ECMAScript中，所有函數的參數都是按值傳遞的，

1 2 3 4 5 6 7 8 9 10 11

<script type="text/javascript">    function box(num){   //按值傳遞      num+=10;      return num;    }       var num = 10;    var result = box(num);    alert(result); //如果是按引用傳遞，那麼函數裡的num會成為類似全域變數，把外面的number替換掉    alert(num);  //也就是說，最後應該輸出20（這裡輸出10） </script>

javascript沒有按引用傳遞的，如果存在引用傳遞的話，那麼函數內的變數將是全域變數，在外部也可以訪問。但這明顯是不可能的。

執行環境及範圍

執行環境是javascript中最為重要的概念之一，執行環境定義了變數或函數有權訪問其他資料。

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

1 2 3 4 5 6 7 8 9

<script type="text/javascript">    var name = "Jack";      //定義全域變數    function setName(){      return "trigkit4";    }       alert(window.name);    //全域變數，最外圍，屬於window屬性    alert(window.setName()); //全域函數，最外圍，屬於window方法 </script>

當執行環境內的代碼執行完畢後，該環境被銷毀，儲存其中的變數和函數也隨之銷毀，如果是全域環境，需所有程式執行完畢或網頁完畢後才會銷毀。

去掉var的局部變數

1 2 3 4 5 6 7 8 9

<script type="text/javascript">    var name = "Jack";    function setName(){      name = "trigkit4";  //去掉var變成了全域變數    }       setName();    alert(name);//彈出trigkit4 </script>

通過傳參，也是局部變數

1 2 3 4 5 6 7 8 9

<script type="text/javascript">    var name = "Jack";    function setName(name){  //通過傳參，也是局部變數      alert(name);    }       setName("trigkit4");//彈出trigkit4    alert(name);//彈出Jack </script>

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

1 2 3 4 5 6 7 8 9

<script type="text/javascript">    var name = "Jack";    function setName(){      function setYear(){  //setYear()方法的範圍在setName()內        return 21;      }    }    alert(setYear());//無法訪問，出錯  </script>

可以通過如下方法進行訪問：

1 2 3 4 5 6 7 8 9 10

<script type="text/javascript">    var name = "Jack";    function setName(){      function setYear(){  //setYear()方法的範圍在setName()內        return 21;      }      return setYear();    }    alert(setName()); //彈出21 </script>

再一個範圍例子：

1 2 3 4 5 6 7 8 9 10

<script type="text/javascript">    var name = "Jack";    function setName(){      function setYear(){  //setYear()方法的範圍在setName()內        var b = "hi";   //變數b的範圍在setYear()內        return 21;      }      alert(b);//無法訪問     } </script>

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

範圍

變數沒有在函數內聲明或者聲明的時候沒有帶var就是全域變數，擁有全域範圍，window對象的所有屬性擁有全域範圍；在代碼任何地方都可以訪問，函數內部聲明並且以var修飾的變數就是局部變數，只能在函數體內使用，函數的參數雖然沒有使用var但仍然是局部變數。

沒有塊級範圍

沒有塊級範圍

1 2 3 4 5 6 7 8 9

// if語句：    <script type="text/javascript"> if(true){            //if語句的花括弧沒有範圍的功能。    var box = "trigkit4"; } alert(box);//彈出 trigkit4 </script>

for迴圈語句也是如此。

變數的查詢

在變數的查詢中，訪問局部變數要比全域變數來得快，因此不需要向上搜尋範圍鏈。
如下例子：

1 2 3 4 5 6 7 8

<script type="text/javascript">    var name = "Jack";    function setName(){       var name = "trigkit4";       return name; //從底層向上搜尋變數   }   alert(setName());    </script>

記憶體問題

javascript具有自動記憶體回收機制，一旦資料不再使用，可以將其設為"null"來釋放引用

循環參考

　　一個很簡單的例子：一個DOM對象被一個Javascript對象引用，與此同時又引用同一個或其它的Javascript對象，這個DOM對象可能會引發記憶體泄露。這個DOM對象的引用將不會在指令碼停止的時候被記憶體回收行程回收。要想破壞循環參考，引用DOM元素的對象或DOM對象的引用需要被賦值為null。

閉包

在閉包中引入閉包外部的變數時，當閉包結束時此對象無法被記憶體回收（GC）。

1 2 3 4 5 6

var a = function() {  var largeStr = new Array(1000000).join('x');  return function() {   return largeStr;  } }();

DOM泄露

當原有的COM被移除時，子結點引用沒有被移除則無法回收。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var select = document.querySelector; var treeRef = select('#tree');    //在COM樹中leafRef是treeFre的一個子結點 var leafRef = select('#leaf');  var body = select('body');    body.removeChild(treeRef);    //#tree不能被回收入，因為treeRef還在 //解決方案: treeRef = null;    //tree還不能被回收，因為葉子結果leafRef還在 leafRef = null;    //現在#tree可以被釋放了。

Timers計（定）時器泄露

定時器也是常見產生記憶體泄露的地方：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

for (var i = 0; i < 90000; i++) {  var buggyObject = {   callAgain: function() {    var ref = this;    var val = setTimeout(function() {     ref.callAgain();    }, 90000);   }  }     buggyObject.callAgain();  //雖然你想回收但是timer還在  buggyObject = null; }

調試記憶體

Chrome內建的記憶體調試工具可以很方便地查看記憶體使用量情況和記憶體泄露：
在 Timeline -> Memory 點擊record即可：