JavaScript中變量作用域及內存問題的示例分析

這篇文章給大家分享的是有關JavaScript中變量作用域及內存問題的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

學習要點：

1.變量及作用域
2.內存問題

JavaScript的變量與其他語言的變量有很大區(qū)別。JavaScript變量是松散型的(不強制類型)本質，決定了它只是在特定時間用于保存特定值的一個名字而已。由于不存在定義某個變量必須要保存何種數據類型值的規(guī)則，變量的值及其數據類型可以在腳本的生命周期內改變。

一．變量及作用域

1.基本類型和引用類型的值

ECMAScript變量可能包含兩種不同的數據類型的值：基本類型值和引用類型值。基本類型值指的是那些保存在棧內存中的簡單數據段，即這種值完全保存在內存中的一個位置。而引用類型值則是指那些保存在堆內存中的對象，意思是變量中保存的實際上只是一個指針，這個指針指向內存中的另一個位置，該位置保存對象。

將一個值賦給變量時，解析器必須確定這個值是基本類型值，還是引用類型值?；绢愋椭涤幸韵聨追N：Undefined、Null、Boolean、Number和String。這些類型在內存中分別占有固定大小的空間，他們的值保存在?？臻g，我們通過按值來訪問的。

PS：在某些語言中，字符串以對象的形式來表示，因此被認為是引用類型。ECMAScript放棄這一傳統(tǒng)。

如果賦值的是引用類型的值，則必須在堆內存中為這個值分配空間。由于這種值的大小不固定，因此不能把它們保存到棧內存中。但內存地址大小的固定的，因此可以將內存地址保存在棧內存中。這樣，當查詢引用類型的變量時，先從棧中讀取內存地址，然后再通過地址找到堆中的值。對于這種，我們把它叫做按引用訪問。

2.動態(tài)屬性

定義基本類型值和引用類型值的方式是相似的：創(chuàng)建一個變量并為該變量賦值。但是，當這個值保存到變量中以后，對不同類型值可以執(zhí)行的操作則大相徑庭。

var box = new Object(); //創(chuàng)建引用類型
box.name = 'Lee'; //新增一個屬性
alert(box.name); //輸出

如果是基本類型的值添加屬性的話，就會出現問題了。

var box = 'Lee'; //創(chuàng)建一個基本類型
box.age = 27; //給基本類型添加屬性
alert(box.age); //undefined

3.復制變量值

在變量復制方面，基本類型和引用類型也有所不同?；绢愋蛷椭频氖侵当旧恚妙愋蛷椭频氖堑刂?。

var box = 'Lee'; //在棧內存生成一個box 'Lee'
var box2 = box; //在棧內存再生成一個box2 'Lee'

box2是雖然是box1的一個副本，但從圖示可以看出，它是完全獨立的。也就是說，兩個變量分別操作時互不影響。

var box = new Object(); //創(chuàng)建一個引用類型
box.name = 'Lee'; //新增一個屬性
var box2 = box; //把引用地址賦值給box2

在引用類型中，box2其實就是box，因為他們指向的是同一個對象。如果這個對象中的name屬性被修改了，box2.name和box.name輸出的值都會被相應修改掉了。

4.傳遞參數

ECMAScript中所有函數的參數都是按值傳遞的，言下之意就是說，參數不會按引用傳遞，雖然變量有基本類型和引用類型之分。

function box(num) { //按值傳遞，傳遞的參數是基本類型
  num += 10; //這里的num是局部變量，全局無效
  return num;
}
var num = 50;
var result = box(num);
alert(result); //60
alert(num); //50

PS：以上的代碼中，傳遞的參數是一個基本類型的值。而函數里的num是一個局部變量，和外面的num沒有任何聯系。

下面給出一個參數作為引用類型的例子。

function box(obj) { //按值傳遞，傳遞的參數是引用類型
  obj.name = 'Lee';
}
var p = new Object();
box(p);
alert(p.name);

PS：如果存在按引用傳遞的話，那么函數里的那個變量將會是全局變量，在外部也可以訪問。比如PHP中，必須在參數前面加上&符號表示按引用傳遞。而ECMAScript沒有這些，只能是局部變量?？梢栽赑HP中了解一下。

PS：所以按引用傳遞和傳遞引用類型是兩個不同的概念。

function box(obj) {
  obj.name = 'Lee';
  var obj = new Object(); //函數內部又創(chuàng)建了一個對象
  obj.name = 'Mr.'; //并沒有替換掉原來的obj
}

最后得出結論，ECMAScript函數的參數都將是局部變量，也就是說，沒有按引用傳遞。

5.檢測類型

要檢測一個變量的類型，我們可以通過typeof運算符來判別。諸如：

var box = 'Lee';
alert(typeof box); //string

雖然typeof運算符在檢查基本數據類型的時候非常好用，但檢測引用類型的時候，它就不是那么好用了。通常，我們并不想知道它是不是對象，而是想知道它到底是什么類型的對象。因為數組也是object，null也是Object等等。

這時我們應該采用instanceof運算符來查看。

var box = [1,2,3];
alert(box instanceof Array); //是否是數組
var box2 = {};
alert(box2 instanceof Object); //是否是對象
var box3 = /g/;
alert(box3 instanceof RegExp); //是否是正則表達式
var box4 = new String('Lee');
alert(box4 instanceof String); //是否是字符串對象

PS：當使用instanceof檢查基本類型的值時，它會返回false。

5.執(zhí)行環(huán)境及作用域

執(zhí)行環(huán)境是JavaScript中最為重要的一個概念。執(zhí)行環(huán)境定義了變量或函數有權訪問的其他數據，決定了它們各自的行為。

全局執(zhí)行環(huán)境是最外圍的執(zhí)行環(huán)境。在Web瀏覽器中，全局執(zhí)行環(huán)境被認為是window對象。因此所有的全局變量和函數都是作為window對象的屬性和方法創(chuàng)建的。

var box = 'blue'; //聲明一個全局變量
function setBox() {
  alert(box); //全局變量可以在函數里訪問
}
setBox(); //執(zhí)行函數

全局的變量和函數，都是window對象的屬性和方法。

var box = 'blue';
function setBox() {
  alert(window.box); //全局變量即window的屬性
}
window.setBox(); //全局函數即window的方法

PS：當執(zhí)行環(huán)境中的所有代碼執(zhí)行完畢后，該環(huán)境被銷毀，保存在其中的所有變量和函數定義也隨之銷毀。如果是全局環(huán)境下，需要程序執(zhí)行完畢，或者網頁被關閉才會銷毀。

PS：每個執(zhí)行環(huán)境都有一個與之關聯的變量對象，就好比全局的window可以調用變量和屬性一樣。局部的環(huán)境也有一個類似window 的變量對象，環(huán)境中定義的所有變量和函數都保存在這個對象中。(我們無法訪問這個變量對象，但解析器會處理數據時后臺使用它)

函數里的局部作用域里的變量替換全局變量，但作用域僅限在函數體內這個局部環(huán)境。

var box = 'blue';
function setBox() {
  var box = 'red'; //這里是局部變量，出來就不認識了
  alert(box);
}
setBox();
alert(box);

通過傳參，可以替換函數體內的局部變量，但作用域僅限在函數體內這個局部環(huán)境。

var box = 'blue';
function setBox(box) { //通過傳參，替換了全局變量
  alert(box);
}
setBox('red');
alert(box);

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

var box = 'blue';
function setBox() {
  function setColor() {
var b = 'orange';
    alert(box);
alert(b);
  }
  setColor(); //setColor()的執(zhí)行環(huán)境在setBox()內
}
setBox();

PS：每個函數被調用時都會創(chuàng)建自己的執(zhí)行環(huán)境。當執(zhí)行到這個函數時，函數的環(huán)境就會被推到環(huán)境棧中去執(zhí)行，而執(zhí)行后又在環(huán)境棧中彈出(退出)，把控制權交給上一級的執(zhí)行環(huán)境。

PS：當代碼在一個環(huán)境中執(zhí)行時，就會形成一種叫做作用域鏈的東西。它的用途是保證對執(zhí)行環(huán)境中有訪問權限的變量和函數進行有序訪問。作用域鏈的前端，就是執(zhí)行環(huán)境的變量對象。

6.沒有塊級作用域

塊級作用域表示諸如if語句等有花括號封閉的代碼塊，所以，支持條件判斷來定義變量。

if (true) { //if語句代碼塊沒有局部作用域
  var box = 'Lee';
}
alert(box);

for循環(huán)語句也是如此

for (var i = 0; i < 10; i ++) { //沒有局部作用域
  var box = 'Lee';
}
alert(i);
alert(box);

var關鍵字在函數里的區(qū)別

function box(num1, num2) {
  var sum = num1 + num2; //如果去掉var就是全局變量了
  return sum;
}
alert(box(10,10));
alert(sum); //報錯

PS：非常不建議不使用var就初始化變量，因為這種方法會導致各種意外發(fā)生。所以初始化變量的時候一定要加上var。

一般確定變量都是通過搜索來確定該標識符實際代表什么。

var box = 'blue';
function getBox() {
  return box; //代表全局box
} //如果加上函數體內加上var box = 'red'
alert(getBox()); //那么最后返回值就是red

PS：變量查詢中，訪問局部變量要比全局變量更快，因為不需要向上搜索作用域鏈。

二．內存問題

JavaScript具有自動垃圾收集機制，也就是說，執(zhí)行環(huán)境會負責管理代碼執(zhí)行過程中使用的內存。其他語言比如C和C++，必須手工跟蹤內存使用情況，適時的釋放，否則會造成很多問題。而JavaScript則不需要這樣，它會自行管理內存分配及無用內存的回收。

JavaScript最常用的垃圾收集方式是標記清除。垃圾收集器會在運行的時候給存儲在內存中的變量加上標記。然后，它會去掉環(huán)境中正在使用變量的標記，而沒有被去掉標記的變量將被視為準備刪除的變量。最后，垃圾收集器完成內存清理工作，銷毀那些帶標記的值并回收他們所占用的內存空間。

垃圾收集器是周期性運行的，這樣會導致整個程序的性能問題。比如IE7以前的版本，它的垃圾收集器是根據內存分配量運行的，比如256個變量就開始運行垃圾收集器，這樣，就不得不頻繁地運行，從而降低的性能。

一般來說，確保占用最少的內存可以讓頁面獲得更好的性能。那么優(yōu)化內存的最佳方案，就是一旦數據不再有用，那么將其設置為null來釋放引用，這個做法叫做解除引用。這一做法適用于大多數全局變量和全局對象。

var o = {
  name : 'Lee'
};
o = null; //解除對象引用，等待垃圾收集器回收

感謝各位的閱讀！關于“JavaScript中變量作用域及內存問題的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！