javascript資料型別和作用域介紹

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

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

一.變數及作用域:

1.基本型別和引用型別:

javascript變數包含兩種不同的資料型別的值:基本型別值和引用型別值;

（1）.基本型別值:儲存在棧記憶體中的簡單資料段;即這種值完全儲存在記憶體中的一個位置;

基本型別值包含:Undefined|Null|Boolean|Number|String;

這些型別在記憶體中佔有固定大小的空間;它們的值儲存在棧空間,我們按值來訪問;

（2）.引用型別值:儲存在堆記憶體中的物件(可能由多個值構成),即變數中儲存的實際上只是一個指標,這個指標指向記憶體中的另一個位置,該位置儲存物件;

引用型別的值的大小不固定,因此不能儲存在棧記憶體,必須儲存在堆記憶體中;但可以將引用型別的值的記憶體地址儲存在棧記憶體中;

當查詢引用型別的變數時,先從棧記憶體中讀取記憶體地址,然後通過地址找到堆記憶體中的值;=>按引用訪問。

2.動態屬性:

定義基本型別值和引用型別值的方式相似:建立一個變數併為該變數賦值;

但當這個值儲存到變數中以後,對不同型別值可以執行的操作則不一樣;

[JavaScript] 純文字檢視 複製程式碼
var box = new Object();// 建立引用型別;
  box.name = 'lee'; // 新增一個屬性;
  console.log(box.name); // =>lee;
  var box = 'lee'; // 建立基本型別
  box.age = 15; // 給基本型別新增屬性;
  console.log(box.age);// =>undefined;

3.複製變數值:

在變數複製方面,基本型別和引用型別也有所不同;

基本型別賦值的是值本身。

[JavaScript] 純文字檢視 複製程式碼
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.傳遞引數:

javascript中所有函式的引數都是按值傳遞的,即引數不會按引用傳遞。

[JavaScript] 純文字檢視 複製程式碼
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.檢測型別:

[JavaScript] 純文字檢視 複製程式碼
// 要檢測一個變數的型別,通過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.執行環境及作用域:

[JavaScript] 純文字檢視 複製程式碼
// 執行環境:定義了變數或函式有權訪問的其他資料,決定了它們各自的行為;
// 在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語句:會建立一個新的變數物件,其中包含的是被丟擲的錯誤物件的宣告;

[JavaScript] 純文字檢視 複製程式碼
function buildUrl(){
  var qs = '?debug=true';
  with(location){// with語句接收的是location物件,因此變數物件中就包含了location物件的所有屬性和方法;
      var url = href+qs;// 而這個變數物件被新增到了作用域鏈的前端;
  };
  return url;
}

8.沒有塊級作用域:

[JavaScript] 純文字檢視 複製程式碼
// 塊級作用域:表示諸如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:變數查詢中，訪問區域性變數要比全域性變數更快，因為不需要向上搜尋作用域鏈；

二.記憶體問題:

javascript具有自動垃圾收集機制,執行環境會負責管理程式碼執行過程中使用的記憶體;它會自行管理記憶體分配及無用記憶體的回收;

javascript最常用的垃圾收集方式就是標記清除;垃圾收集器會在執行的時候給儲存在記憶體中的變數加上標記;

然後,它會去掉環境中正在使用的變數的標記,而沒有被去掉標記的變數將被視為準備刪除的變數;

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

垃圾收集器是週期性執行的,這樣會導致整個程式的效能問題;

比如IE7以前的版本,他的垃圾收集器是根據記憶體分配量執行的,比如256個變數就開始執行垃圾收集器,這樣就不得不頻繁地執行,從而降低了效能;

一般來說,確保佔用最少的記憶體可以讓頁面獲得更好的效能;

最佳方案:一旦資料不再使用,將其值設定為null來釋放引用,這個做法叫做解除引用;

[JavaScript] 純文字檢視 複製程式碼
var o = {
    name:'lee';
  };
  o = null;               // 解除物件引用,等待垃圾收集器回收;

三 小結:

1.變數：

javascript變數可以儲存兩種型別的值:基本型別值和引用型別值;它們具有以下特點:

1.基本型別值在記憶體中佔據固定大小的空間,因此被儲存在棧記憶體中;

2.從一個變數向另一個變數複製基本型別的值,會建立這個值的一個副本;

3.引用型別的值是物件,儲存在堆記憶體中;

4.包含引用型別值的變數實際上包含的並不是物件本身,而是一個指向該物件的指標;

5.從一個變數向另一個變數複製引用型別的值,複製的其實是指標,因此兩個變數最終都指向用一個物件;

6.確定一個值是哪種基本型別可以使用typeof操作符;而確定一個值是哪種引用型別可以使用instanceof操作符;

2.作用域：

所有變數都存在於一個執行環境(作用域)中,這個執行環境決定了變數的生命週期,以及哪一部分程式碼可以訪問其中的變數; 

1.執行環境有全域性執行環境和函式執行環境之分;

2.每次進入一個新執行環境,都會建立一個用於搜尋變數和函式的作用域鏈;

3.函式的區域性環境不僅有權訪問函式作用域中的變數，而且有權訪問其父環境，乃至全域性環境；

.變數的執行環境有助於確定應該合適釋放記憶體;

3.記憶體：

javascript自動垃圾收集機制

1.離開作用域的值將被自動標記為可以回收,因此將在垃圾收集期間被刪除;

2.為了確保有效地回收記憶體,應該及時解除不再使用的全域性物件/全域性物件屬性以及迴圈引用變數的引用;