變量及作用域

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

ECMAScript 變量可能包含兩種不同的數據類型的值:基本類型值和引用類型值?;?/p>

類型值指的是那些保存在棧內存中的簡單數據段,即這種值完全保存在內存中的一個位置。

而引用類型值則是指那些保存在堆內存中的對象,意思是變量中保存的實際上只是一個指

針,這個指針指向內存中的另一個位置,該位置保存對象。

將一個值賦給變量時,解析器必須確定這個值是基本類型值,還是引用類型值。基本類

型值有以下幾種:Undefined、Null、Boolean、Number 和String。這些類型在內存中分別占

有固定大小的空間,他們的值保存在棧空間,我們通過按值來訪問的。

PS:在某些語言中,字符串以對象的形式來表示,因此被認為是引用類型。ECMAScript

放棄這一傳統。

如果賦值的是引用類型的值,則必須在堆內存中為這個值分配空間。由于這種值的大小

不固定,因此不能把它們保存到棧內存中。但內存地址大小的固定的,因此可以將內存地址

保存在棧內存中。這樣,當查詢引用類型的變量時,先從棧中讀取內存地址,然后再通過地

址找到堆中的值。對于這種,我們把它叫做按引用訪問。

圖片發自簡書App

2.動態屬性

定義基本類型值和引用類型值的方式是相似的:創建一個變量并為該變量賦值。但是,

當這個值保存到變量中以后,對不同類型值可以執行的操作則大相徑庭。

var box = new Object(); //創建引用類型

box.name = 'Lee'; //新增一個屬性

alert(box.name); //輸出

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

var box = 'Lee'; //創建一個基本類型

box.age = 27; //給基本類型添加屬性

alert(box.age); //undefined

3.復制變量值

在變量復制方面,基本類型和引用類型也有所不同?;绢愋蛷椭频氖侵当旧?,而引用

類型復制的是地址。

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

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

圖片發自簡書App

box2 是雖然是box1 的一個副本,但從圖示可以看出,它是完全獨立的。也就是說,兩

個變量分別操作時互不影響。

var box = new Object(); //創建一個引用類型

box.name = 'Lee'; //新增一個屬性

var box2 = box;

圖片發自簡書App

在引用類型中,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 沒有這

些,只能是局部變量。可以在PHP 中了解一下。

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

function box(obj) {

obj.name = 'Lee';

var obj = new Object(); //函數內部又創建了一個對象

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.執行環境及作用域

執行環境是JavaScript 中最為重要的一個概念。執行環境定義了變量或函數有權訪問的

其他數據,決定了它們各自的行為。

全局執行環境是最外圍的執行環境。在Web 瀏覽器中,全局執行環境被認為是window

對象。因此所有的全局變量和函數都是作為window 對象的屬性和方法創建的。

var box = 'blue'; //聲明一個全局變量

function setBox() {

alert(box); //全局變量可以在函數里訪問

}

setBox(); //執行函數

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

var box = 'blue';

function setBox() {

alert(window.box); //全局變量即window 的屬性

}

window.setBox(); //全局函數即window 的方法

PS:當執行環境中的所有代碼執行完畢后,該環境被銷毀,保存在其中的所有變量和

函數定義也隨之銷毀。如果是全局環境下,需要程序執行完畢,或者網頁被關閉才會銷毀。

PS:每個執行環境都有一個與之關聯的變量對象,就好比全局的window 可以調用變量

和屬性一樣。局部的環境也有一個類似window 的變量對象,環境中定義的所有變量和函數

都保存在這個對象中。(我們無法訪問這個變量對象,但解析器會處理數據時后臺使用它)

函數里的局部作用域里的變量替換全局變量,但作用域僅限在函數體內這個局部環境。

var box = 'blue';

function setBox() {

var box = 'red'; //這里是局部變量,出來就不認識了

alert(box);

}

setBox();

alert(box);

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

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()的執行環境在setBox()內

}

setBox();

PS:每個函數被調用時都會創建自己的執行環境。當執行到這個函數時,函數的環境

就會被推到環境棧中去執行,而執行后又在環境棧中彈出(退出),把控制權交給上一級的執

行環境。

PS:當代碼在一個環境中執行時,就會形成一種叫做作用域鏈的東西。它的用途是保

證對執行環境中有訪問權限的變量和函數進行有序訪問。作用域鏈的前端,就是執行環境的

變量對象。

6.沒有塊級作用域

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

量。

if (true) { //if 語句代碼塊沒有局部作用域

var box = 'Lee';

}

alert(box);

for 循環語句也是如此

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

var box = 'Lee';

}

alert(i);

alert(box);

var 關鍵字在函數里的區別

function box(num1, num2) {

var sum = num1 + num2; //如果去掉var 就是全局變量了

return sum;

}

alert(box(10,10));

alert(sum); //報錯

PS:非常不建議不使用var 就初始化變量,因為這種方法會導致各種意外發生。所以初

始化變量的時候一定要加上var。

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

var box = 'blue';

function getBox() {

return box; //代表全局box

} //如果加上函數體內加上var box = 'red'

alert(getBox()); //那么最后返回值就是red

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 謹記 當你感覺累的時候,說明你還活著,當你突然感覺不到的累那一刻,也就意味著你已經被社會淘汰了,人活著就的受累,因...
    長風留言閱讀 1,334評論 3 7
  • 《ijs》速成開發手冊3.0 官方用戶交流:iApp開發交流(1) 239547050iApp開發交流(2) 10...
    葉染柒丶閱讀 5,342評論 0 7
  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創建并操作數組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,272評論 0 4
  • 第一章: JS簡介 從當初簡單的語言,變成了現在能夠處理復雜計算和交互,擁有閉包、匿名函數, 甚至元編程等...
    LaBaby_閱讀 1,703評論 0 6
  • ECMAScript有兩種開發模式:1.函數式(過程化),2.面向對象(OOP)。面向對象的語言有一個標志,那就是...
    lovelydong閱讀 672評論 0 2