JavaScript 變數、範圍及記憶體，javascript

JavaScript 變數、範圍及記憶體，javascript

JS變數是鬆散型的(不強制類型)本質,決定了它只是在特定時間用於儲存特定值的一個名字而已;
由於不存在定義某個變數必須要儲存何種資料類型值的規則,變數的值及其資料類型可以在指令碼的生命週期內改變;

一 變數及範圍
1.基本類型和參考型別

// JS變數包含兩種不同的資料類型的值:基本類型值和參考型別值;

// 1.基本類型值:儲存在棧記憶體中的簡單資料區段;即這種值完全儲存在記憶體中的一個位置;
// 基本類型值包含:Undefined|Null|Boolean|Number|String;
// 這些類型在記憶體中佔有固定大小的空間;它們的值儲存在棧空間,我們按值來訪問;

// 2.參考型別值:儲存在堆記憶體中的對象(可能由多個值構成),即變數中儲存的實際上只是一個指標,這個指標指向記憶體中的另一個位置,該位置儲存對象;
// 參考型別的值的大小不固定,因此不能儲存在棧記憶體,必須儲存在堆記憶體中;但可以將參考型別的值的記憶體位址儲存在棧記憶體中;
// 當查詢參考型別的變數時,先從棧記憶體中讀取記憶體位址,然後通過地址找到堆記憶體中的值;=>按引用訪問;

2.動態屬性

// 定義基本類型值和參考型別值的方式相似:建立一個變數並為該變數賦值;// 但當這個值儲存到變數中以後,對不同類型值可以執行的操作則不一樣;  var box = new Object();           // 建立參考型別;  box.name = 'lee';              // 新增一個屬性;  console.log(box.name);           // =>lee;  var box = 'lee';              // 建立基本類型  box.age = 15;                // 給基本類型添加屬性;  console.log(box.age);            // =>undefined;

3.複製變數值

// 在變數複製方面,基本類型和參考型別也有所不同;// 基本類型賦值的是值本身;  var box = 'lee';              // 在棧記憶體中產生一個box'lee';  var box2 = box;               // 在棧記憶體中再產生一個box2'lee';  // box和box2完全獨立;兩個變數分別操作時互不影響;// 參考型別賦值的是地址;  var box = new Object();          // 建立一個參考型別;box在棧記憶體中;而Object在堆記憶體中;  box.name = 'lee';             // 新增一個屬性;  var box2 = box;              // 把引用地址賦值給box2;box2在棧記憶體中;  // box2=box,因為它們指向的是同一個對象;  // 如果這個對象中的name屬性被修改了,box.name和box2.name輸出的值都會被修改掉;

4.傳遞參數

// JS中所有函數的參數都是按值傳遞的,即參數不會按引用傳遞;  function box(num){             // 按值傳遞,傳遞的參數是基本類型;    num +=10;               // 這裡的num是局部變數,全域無效;    return num;  }  var num = 50;  var result = box(num);  console.log(result);           // 60;  console.log(num);             // 50;  function box(num){    return num;  }  console.log(num);             // num is not defined;  function box(obj){    obj.name = 'lee';    var obj = new Object();       // 函數內部又建立了一個對象,它是局部變數;但在函數結束時被銷毀了;    obj.name = 'Mr';           // 並沒有替換掉原來的obj;  }  var p = new Object();  box(p);                 // 變數p被傳遞到box()函數中之後就被複製給了obj;在函數內部,obj和p訪問的是同一個對象;  console.log(p.name);           // =>lee;  // JS函數的參數都將是局部變數;也就是說,沒有按引用傳遞;

5.檢測類型

// 要檢測一個變數的類型,通過typeof運算子類判斷;// 多用來檢測基本類型;  var box = 'lee';  console.log(typeof box);          // =>string;// 要檢測變數是什麼類型的對象,通過instanceof運算子來查看;  var box = [1,2,3];  console.log(box instanceof Array);     // =>true;  var box2 = {};  console.log(box2 instanceof Object);  var box3 = /g/;  console.lgo(box3 instanceof RegExp);  var box4 = new String('lee');  console.log(box4 instanceof String);   // =>true;是否是字串對象;  var box5 = 'string';  console.log(box5 instanceof String);   // =>false;  // 當使用instanceof檢查基本類型的值時,它會返回false;

6.執行環境及範圍

// 執行環境:定義了變數或函數有權訪問的其他資料,決定了它們各自的行為;// 在Web瀏覽器中,全域執行環境=window對象;// 因此所有的全域變數和函數都是作為window對象的屬性和方法建立的;  var box = 'blue';             // 聲明一個全域變數;  function setBox(){    console.log(box);           // 全域變數可以在函數裡訪問;  }    setBox();                 // 執行函數;  // 全域的變數=window對象的屬性;  // 全域的函數=window對象的方法;// PS:當執行環境中的所有代碼執行完畢後,該環境被銷毀,儲存在其中的所有變數和函數定義也隨之銷毀;// 如果是在全域環境下,需要程式執行完畢,或者網頁被關閉才會銷毀;// PS:每個執行環境都有一個與之關聯的變數對象,就好比全域的window可以調用全域變數和全域方法一樣;// 局部的環境也有一個類似window的變數對象,環境中定義的所有變數和函數都儲存在這個對象中;// (我們無法訪問這個變數對象,但解析器會處理資料時後台使用它);  var box = 'blue';  function setBox(){    var box = 'red';           // 這裡是局部變數,在當前函數體內的值是'red';出了函數體就不被認知;    console.log(box);  }    setBox();  console.log(box);// 通過傳參可以替換函數體內的局部變數,但範圍僅限在函數體內這個局部環境;  var box = 'blue';  function setBox(box){           // 通過傳參,將局部變數替換成了全域變數;    alert(box);              // 此時box的值是外部調用時傳入的參數;=>red;  }  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.延長範圍鏈

// 有些語句可以在範圍鏈的前端臨時增加一個變數對象,該變數對象會在代碼執行後被移除;// with語句和try-catch語句;這兩個語句都會在範圍鏈的前端添加一個變數對象;// with語句:會將指定的對象添加到範圍鏈中; // catch語句:會建立一個新的變數對象,其中包含的是被拋出的錯誤對象的聲明;  function buildUrl(){    var qs = '?debug=true';    with(location){            // with語句接收的是location對象,因此變數對象中就包含了location對象的所有屬性和方法;      var url = href+qs;        // 而這個變數對象被添加到了範圍鏈的前端;    };    return url;  }

8.沒有塊級範圍

// 塊級範圍:表示諸如if語句等有花括弧封閉的代碼塊,所以,支援條件判斷來定義變數;  if(true){                 // if語句代碼塊沒有局部範圍;    var box = 'lee';           // 變數聲明會將變數添加到當前的執行環境(在這裡是全域環境);  }  alert(box);  for(var i=0; i<10; i++){         // 建立的變數i即使在for迴圈執行結束後,也依舊會存在與迴圈外部的執行環境中;    var box = 'lee';  }  alert(i);  alert(box);  function box(num1,num2){    var sum = num1+num2;         // 此時sum是局部變數;如果去掉var,sum就是全域變數了;    return sum;  }  alert(box(10,10));  alert(sum);                // sum is not defined;訪問不到sum;  // PS:不建議不使用var就初始設定變數,因為這種方法會導致各種意外發生;// 一般確定變數都是通過搜尋來確定該標識符實際代表什麼;搜尋方式:向上逐級查詢;  var box = 'blue';  function getBox(){    return box;              // 此時box是全域變數;如果是var box='red',那就變成局部變數了;  }  alert(getBox());                // 調用getBox()時會引用變數box;  // 首先,搜尋getBox()的變數對象,尋找名為box的標識符;  // 然後,搜尋繼續下一個變數對象(全域環境的變數對象),找到了box標識符;// PS:變數查詢中，訪問局部變數要比全域變數更快，因為不需要向上搜尋範圍鏈；

二 記憶體問題

// JS具有自動垃圾收集機制,執行環境會負責管理代碼執行過程中使用的記憶體;它會自行管理記憶體配置及無用記憶體的回收;// JS最常用的垃圾收集方式就是標記清除;垃圾收集器會在啟動並執行時候給儲存在記憶體中的變數加上標記;// 然後,它會去掉環境中正在使用的變數的標記,而沒有被去掉標記的變數將被視為準備刪除的變數;// 最後,垃圾收集器完成記憶體清理工作,銷毀那些標記的值並回收他們所佔用的記憶體空間;// 垃圾收集器是周期性啟動並執行,這樣會導致整個程式的效能問題;// 比如IE7以前的版本,他的垃圾收集器是根據記憶體配置量啟動並執行,比如256個變數就開始運行垃圾收集器,這樣就不得不頻繁地運行,從而降低了效能;// 一般來說,確保佔用最少的記憶體可以讓頁面獲得更好的效能;// 最佳方案:一旦資料不再使用,將其值設定為null來釋放引用,這個做法叫做解除引用;  var o = {    name:'lee';  };  o = null;               // 解除對象引用,等待垃圾收集器回收;

三 小結

1.變數
// JS變數可以儲存兩種類型的值:基本類型值和參考型別值;它們具有以下特點:
// 1.基本類型值在記憶體中佔據固定大小的空間,因此被儲存在棧記憶體中;
// 2.從一個變數向另一個變數複製基本類型的值,會建立這個值的一個副本;
// 3.參考型別的值是對象,儲存在堆記憶體中;
// 4.包含參考型別值的變數實際上包含的並不是對象本身,而是一個指向該對象的指標;
// 5.從一個變數向另一個變數複製參考型別的值,複製的其實是指標,因此兩個變數最終都指向用一個對象;
// 6.確定一個值是哪種基本類型可以使用typeof操作符;而確定一個值是哪種參考型別可以使用instanceof操作符;

2.範圍
// 所有變數都存在於一個執行環境(範圍)中,這個執行環境決定了變數的生命週期,以及哪一部分代碼可以訪問其中的變數;
// 1.執行環境有全域執行環境和函數執行環境之分;
// 2.每次進入一個新執行環境,都會建立一個用於搜尋變數和函數的範圍鏈;
// 3.函數的局部環境不僅有權訪問函數範圍中的變數，而且有權訪問其父環境，乃至全域環境；
// 4.變數的執行環境有助於確定應該合適釋放記憶體;

3.記憶體
// JS自動垃圾收集機制
// 1.離開範圍的值將被自動標籤為可以回收,因此將在垃圾收集期間被刪除;
// 2.為了確保有效地回收記憶體,應該及時解除不再使用的全域對象/全域對象屬性以及循環參考變數的引用;