js變數、作用域及記憶體詳解_基礎知識-js教程-PHP中文網

基本類型值有：undefined，NUll，Boolean，Number和String，這些類型分別在記憶體中佔有固定的大小空間，他們的值保存在堆疊空間，我們透過按值來存取的。

（1）值類型：數值、布林值、null、undefined。
（2）引用類型：物件、陣列、函數。

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

<script type="text/javascript”>
var box = new Object(); //创建一个引用类型
var box = "lee";  //基本类型值是字符串
box.age = 23;  //基本类型值添加属性很怪异，因为只有对象才可以添加属性。
alert(box.age); //不是引用类型，无法输出；
</script>

登入後複製

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

<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>

登入後複製

複製變數值

再看下面這個例子：

<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中，所有函數的參數都是按值傳遞的，

<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的屬性和方法創建的。

<script type="text/javascript">
   var name = "Jack";      //定义全局变量
   function setName(){
     return "trigkit4";
   }

   alert(window.name);    //全局变量，最外围，属于window属性
   alert(window.setName()); //全局函数，最外围，属于window方法
</script>

登入後複製

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

去掉var的局部變數

<script type="text/javascript">
   var name = "Jack";
   function setName(){
     name = "trigkit4";  //去掉var变成了全局变量
   }

   setName();
   alert(name);//弹出trigkit4
</script>

登入後複製

透過傳參，也是局部變數

<script type="text/javascript">
   var name = "Jack";
   function setName(name){  //通过传参，也是局部变量
     alert(name);
   }

   setName("&#65532;trigkit4");//弹出trigkit4
   alert(name);//弹出Jack
</script>

登入後複製

函數體內也包含函數，只有這個函數可以存取內一層的函數

<script type="text/javascript">
   var name = "Jack";
   function setName(){
     function setYear(){  //setYear()方法的作用域在setName()内
       return 21;
     }
   }
   alert(setYear());//无法访问，出错 
</script>

登入後複製

可以透過以下方法存取：

<script type="text/javascript">
   var name = "Jack";
   function setName(){
     function setYear(){  //setYear()方法的作用域在setName()内
       return 21;
     }
     return setYear();
   }
   alert(setName()); //弹出21
</script>

登入後複製

再作用域範例：

<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但仍是局部變數。

沒有區塊級作用域

沒有區塊級作用域

// if语句：

<script type="text/javascript">
if(true){            //if语句的花括号没有作用域的功能。

var box = "trigkit4";
}
alert(box);//弹出 trigkit4
</script>

登入後複製

for迴圈語句也是如此。

變數的查詢

在變數的查詢中，存取局部變數比全域變數來得快，因此不需要向上搜尋作用域鏈。
如下例：

<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）。

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

登入後複製

DOM洩漏

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

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計（定）時器外洩

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

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即可：