原生js的一些研究和總結(1)

阿新 • • 發佈：2019-01-11

資料型別

基本型別值包括： undefined，null，Boolean，Number和String，這些型別分別在記憶體中佔有固定的大小空間，它們的值儲存在棧空間，我們通過按值來訪問的。
引用型別包括：物件、陣列、函式等。
對於引用型別的值，則必須在堆記憶體中為這個值分配空間。由於引用型別值的大小不固定（物件有很多屬性和方法，而且還可以動態的新增屬性和方法），因此不能把他們儲存到棧記憶體中。但記憶體地址大小是固定的，因此可以將記憶體地址儲存在棧記憶體中。

簡而言之：棧記憶體中存放的是基本資料型別值，堆記憶體中存放的是引用型別值，引用型別值在記憶體中的地址存放在棧中，也就是我們常說的物件物件引用(指標)。
這裡寫圖片描述

變數複製

<script type="text/javascript">
var a = 5;
var b = a;
console.log(a+"---"+b);//5---5
b = 6;//這裡重新給b賦值，a值並沒有改變
console.log(a+"---"+b);//5---6

var obj = {name:"lisi"};
var obj2 = obj;//這裡是引用賦值，obj和obj2指向同一個物件
console.log(obj.name + "---" + obj2.name);//lisi---lisi
obj2.name = "wangwu";
console. 
log(obj.name + "---" + obj2.name);//wangwu---wangwu
</script>

從上面例子可以看出：在變數複製方面，基本型別和引用型別也有所不同，基本型別複製的是值本身，而引用型別複製的是記憶體地址。

函式

this 的工作原理(5種情況)

全域性作用域內

當在全部作用域內使用 this時，它將會指向全域性物件，即window物件

函式呼叫

擋在全域性作用域內呼叫函式時，this 也會指向全域性物件。

方法呼叫

this 指向呼叫該方法的物件。

呼叫建構函式

在建構函式內部，this 指向新建立的物件。

顯式的設定this指向

當使用call 或者 apply 方法時，函式內的 this 將會被顯式設定為函式呼叫的第一個引數。
更詳細用法請見之前的部落格：傳送門

匿名函式

在javascript裡任何匿名函式都是屬於window物件。在定義匿名函式時候它會返回自己的記憶體地址，如果此時有個變數接收了這個記憶體地址，那麼匿名函式就能在程式裡被使用了(可以通過在這個變數後面加一對圓括號來呼叫這個匿名函式)，因為匿名函式也是在全域性執行環境構造時候定義和賦值，所以匿名函式的this指向也是window物件。

<script type="text/javascript">
(function(){
    console.log(this == window);//true
})();
</script>

引數傳遞

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

js中不存在引用傳遞，如果存在引用傳遞的話，那麼函式內的變數將是全域性變數，在外部也可以訪問，但這明顯是不可能的。
再看一個例子：

<script type="text/javascript">
function setName(obj){//obj = person
    obj.name = "lisi";
    obj = new Object();
    obj.name = "wangwu";
}
var person = new Object();
setName(person);
alert(person.name);
console.log(obj.name);//Uncaught ReferenceError: obj is not defined
</script>

在將person傳遞給obj後，其name屬性就被設定成了”lisi”。又將obj重新定義了一個物件，另一行程式碼為該物件定義了一個帶有不同值的name屬性。
如果person是按引用傳遞的，那麼person就會自動被修改為指向其name屬性值為”wangwu”的新物件，但事實上並沒有，其name屬性依然是”lisi”。
這就說明：即使在函式內部修改了引數的值，但原始的引用仍然保持不變。實際上，當在函式內重寫obj時，這個變數引用的就是一個區域性物件了。而這個區域性物件會在函式執行完畢後立即被銷燬。

執行環境及作用域

執行環境

執行環境定義了變數或函式有權訪問其他資料，可以分為全域性執行環境和區域性執行環境。
全域性執行環境是最外層的執行環境，在瀏覽器中，全域性執行環境是window物件，因此，所有的全域性變數的函式都是作為window的屬性和方法建立的。
注意：對於區域性執行環境，其內部的程式碼執行完畢後，該環境將被銷燬，儲存其中的變數和函式也隨之銷燬，如果是全域性執行環境，需所有程式執行完畢或網頁完畢後才會銷燬。

需要注意的小細節

去掉var的區域性變數

<script type="text/javascript">
      var name = "wangwu";
      function setName(){
          name = "lisi";//去掉var變成了全域性變數，會覆蓋全域性中的name
      }
      setName();
      console.log(name);//lisi
</script>

形參也是區域性變數

<script type="text/javascript">
      var name = "wangwu";
      function setName(name){//形參也是區域性變數
          console.log(name);
      }
      setName("lisi");//lisi
      console.log(name);//wangwu
</script>

作用域

當代碼在一個環境中執行的時候，就會形成作用域鏈，它的作用是保證對執行環境中有訪問許可權的變數和函式進行有序訪問（內部深層環境可以訪問外層環境，反之不成立），作用域鏈的前端，就是執行環境的變數物件。
詳見之前部落格：傳送門

記憶體洩漏常見情況

javascript具有自動垃圾回收機制，一旦資料不再使用，可以將其設為”null”來釋放引用。

迴圈引用

分為兩種情況：不同物件之間相互引用和
一個經典的例子：一個DOM物件被一個Javascript物件引用，與此同時又引用同一個或其它的Javascript物件，這個DOM物件可能會引發記憶體洩露。這個DOM物件的引用將不會在指令碼停止的時候被垃圾回收器回收。要想破壞迴圈引用，引用DOM元素的物件或DOM物件的引用需要被賦值為null。

<body>
<script type="text/javascript">
var oBox = document.getElementById("box");
var obj = {};
oBox.name = obj;
obj.age = oBox;//這樣就發生了迴圈引用
</script>
</body>

閉包(常見)

通過閉包引用其包含函式的區域性變數，當閉包結束後該區域性變數無法被垃圾回收機制回收，造成記憶體洩漏。

DOM洩漏

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

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可以被釋放了。

定時器洩漏

for (var i = 0; i < 1000; i++) {
  var obj = {
    fn: function() {
      var that = this;
      var val = setTimeout(function() {
        that.fn();
      }, 500);
    }
  }
  obj.fn();
  //雖然你想回收但是timer還在
  obj = null;
}

垃圾回收

標記清除

js中最常用的垃圾回收方式就是標記清除。垃圾收集器在執行的時候回給儲存在記憶體中的所有變數都加上標記。然後，它會去掉環境中的變數以及被環境中的變數引用的變數的標記（閉包）。而在此之後再被加上標記的變數將被視為準備刪除的變數，原因是環境中的變數已經無法訪問到這些變量了。最後，垃圾收集器完成記憶體清除工作，消除那些帶標記的值並回收它們所佔用的記憶體空間。
例如:在函式中宣告一個變數，就將這個變數標記為”進入環境”。從邏輯上講，永遠不能釋放進入環境的變數所佔用的記憶體，因為只要執行流進入相應的環境，就可能會用到它們。而當變數離開環境時，則將其標記為”離開環境”。

function test(){
 var x = 10 ; //被標記 ，進入環境 
 var y = 20 ; //被標記 ，進入環境
}
test(); //執行完畢後 x、y又被標離開環境，被回收。

引用計數

引用計數就是：跟蹤記錄每個值被引用的次數。當聲明瞭一個變數並將一個引用型別值賦給該變數時，則這個值的引用次數就是1。如果同一個值又被賦給另一個變數，則該值的引用次數加1。相反，如果包含對這個值引用的變數又取得了另外一個值，則這個值的引用次數減1。當這個值的引用次數變成0時，則說明沒有辦法再訪問這個值了，因而就可以將其佔用的記憶體空間回收回來。這樣，當垃圾回收器下次再執行時，它就會釋放那些引用次數為0的值所佔用的記憶體。

function test(){
 var x = {} ; //x的引用次數為0 
 var y = x ; //x的引用次數加1，為1 
 var z =x; //x的引用次數再加1，為2
 var y ={}; //x的引用次數減1，為1
}

引用計數策略的問題(迴圈引用)

function test() {
 var a = {};
 var b = {};
 a.name = b;
 b.name = a;
}
test();

以上程式碼a和b的引用次數都是2，fn()執行完畢後，兩個物件都已經離開環境，在標記清除方式下是沒有問題的，但是在引用計數策略下，因為a和b的引用次數不為0，所以不會被垃圾回收器回收記憶體，如果fn函式被大量呼叫，就會造成記憶體洩露。在IE7與IE8上，記憶體直線上升。
我們知道，IE中有一部分物件並不是原生js物件。例如，其BOM和DOM中的物件就是使用C++以COM物件的形式實現的，而COM物件的垃圾回收機制採用的就是引用計數策略。因此，即使IE的js引擎採用標記清除策略來實現，但js訪問的COM物件依然是基於引用計數策略的。換句話說，只要在IE中涉及COM物件，就會存在迴圈引用的問題。

var element = document.getElementById("some_element");
var myObject = new Object();
myObject.element = element;
element.someObject = myObject;//產生了迴圈引用

這個例子在一個DOM元素（element)與一個原生js物件（myObject)之間建立了迴圈引用。其中，變數myObject有一個名為element的屬性指向element物件；而變數element也有一個someObject屬性指向myObject。由於存在這個迴圈引用，即使例子中的DOM從頁面中移除，它也永遠不會被回收。

myObject.element = null;
element.someObject = null;

為了避免類似這樣的迴圈引用問題，最好在不使用它們的時候手工斷開原生js物件與DOM元素之間的連線。將變數設定為null意味著切斷變數與它此前引用的值之間的連線。當垃圾收集器下次執行時，就會刪除這些值並回收它們佔用的記憶體。
注意：為了解決上述問題，IE9把BOM和DOM物件都轉換成了真正的js物件。這樣，就避免了兩種垃圾收集演算法並存導致的問題，也消除了常見的記憶體洩漏現象。