深入理解JavaScript高級(jí)之詞法作用域和作用域鏈
主要內(nèi)容：
1、分析JavaScript的詞法作用域的含義
2、解析變量的作用域鏈
3、變量名提升時(shí)什么
最近在傳智播客講解JavaScript的課程，有不少朋友覺得JavaScript是如此的簡單，但是又如此的不知如何使用，因此我準(zhǔn)備了一些內(nèi)容給大家分享一下.
這個(gè)系列主要講解JavaScript的高級(jí)部分的內(nèi)容，包括作用域鏈、閉包、函數(shù)調(diào)用模式、原型以及面向?qū)ο蟮囊恍〇|西. 在這里不包含JavaScript的基本語法，如果需要了解基礎(chǔ)的同學(xué)可以到http://net.itcast.cn里面去下載免費(fèi)的視頻進(jìn)行學(xué)習(xí). 好了，廢話不多說，直接進(jìn)入我們的正題.
一、關(guān)于塊級(jí)作用域
說到JavaScript的變量作用域，與咱們平時(shí)使用的類C語言不同.
例如C#中下面代碼：
static void Main(string[] args)
{
if(true)
{
int num = 10;
}
System.Console.WriteLine(num);
}
這段代碼如果進(jìn)行編譯，是無法通過的，因?yàn)?當(dāng)前上下文中不存在名稱num". 因?yàn)檫@里
變量的作用域是由花括號(hào)限定的，稱為塊級(jí)作用域.
在塊級(jí)作用域下，所有的變量都在定義的花括號(hào)內(nèi)，從定義開始到花括號(hào)結(jié)束這個(gè)
范圍內(nèi)可以使用. 出了這個(gè)范圍就無法訪問. 也就是說代碼
if(true)
{
int num = 10;
System.Console.WriteLine(num);
}
這里可以訪問，因?yàn)樽兞康亩x與使用在同一個(gè)花括號(hào)內(nèi).
但是在JavaScript中就不一樣，JavaScript中沒有塊級(jí)作用域的概念.
二、JavaScript中的作用域
在JavaScript中，下面代碼：
if(true) {
var num = 10;
}
alert(num);
運(yùn)行的結(jié)果是彈窗10. 那么在JavaScript中變量的作用范圍是怎么限定的呢？
2.1 函數(shù)限定變量作用域
在JavaScript中，只有函數(shù)可以限定一個(gè)變量的作用范圍. 什么意思呢？
就是說，在JavaScript中，在函數(shù)里面定義的變量，可以在函數(shù)里面被訪問，但是在函數(shù)外
無法訪問. 看如下代碼：
var func = function() {
var num = 10;
};
try {
alert(num);
} catch ( e ) {
alert( e );
}
這段代碼運(yùn)行時(shí)，會(huì)拋出一個(gè)異常，變量num沒有定義. 也就是說，定義在函數(shù)中的變量無法
在函數(shù)外使用，當(dāng)然在函數(shù)內(nèi)可以隨意的使用， 即使在賦值之前. 看下面代碼：
var func = function() {
alert(num);
var num = 10;
alert(num);
};
try {
func();
} catch ( e ) {
alert( e );
}
這段代碼運(yùn)行后，不會(huì)拋出錯(cuò)誤，彈窗兩次，分別是 undefined 和 10(至于為什么，下文解釋).
從這里可以看得出，變量只有在函數(shù)中可以被訪問. 同理在該函數(shù)中的函數(shù)也可以訪問.
2.2 子域訪問父域
前面說了，函數(shù)可以限定變量的作用域，那么在函數(shù)中的函數(shù)就成為該作用域的子域. 在子域
中的代碼可以訪問到父域中的變量. 看下面代碼：
var func = function() {
var num = 10;
var sub_func = function() {
alert(num);
};
sub_func();
};
func();
這段代碼執(zhí)行得到的結(jié)果就是 10. 可以看到上文所說的變量訪問情況. 但是在子域中訪問父域的
代碼也是有條件的. 如下面代碼：
var func = function() {
var num = 10;
var sub_func = function() {
var num = 20;
alert(num);
};
sub_func();
};
func();
這段代碼比前面就多了一個(gè)"var num = 20;"，這句代碼在子域中，那么子域訪問父域的情況就發(fā)
生了變化，這段代碼打印的結(jié)果是 20. 即此時(shí)子域訪問的num是子域中的變量，而不是父域中的.
由此可見訪問有一定規(guī)則可言. 在JavaScript中使用變量，JavaScript解釋器首先在當(dāng)前作
用域中搜索是否有該變量的定義，如果有，就是用這個(gè)變量；如果沒有就到父域中尋找該變量.
以此類推，直到最頂級(jí)作用域，仍然沒有找到就拋出異常"變量未定義". 看下面代碼：
(function() {
var num = 10;
(function() {
var num = 20;
(function(){
alert(num);
})()
})();
})();
這段代碼執(zhí)行后打印出20. 如果將"var num = 20;"去掉，那么打印的就是10. 同樣，如果再去掉
"var num = 10"，那么就會(huì)出現(xiàn)未定義的錯(cuò)誤.
三、作用域鏈
有了JavaScript的作用域的劃分，那么可以將JavaScript的訪問作用域連成一個(gè)鏈?zhǔn)綐錉罱Y(jié)構(gòu).
JavaScript的作用域鏈一旦能清晰的了解，那么對(duì)于JavaScript的變量與閉包就是非常清晰的了.
下面采用繪圖的辦法，繪制作用域鏈.
3.1 繪制規(guī)則：
1) 作用域鏈就是對(duì)象的數(shù)組
2) 全部script是0級(jí)鏈，每個(gè)對(duì)象占一個(gè)位置
3) 凡是看到函數(shù)延伸一個(gè)鏈出來，一級(jí)級(jí)展開
4) 訪問首先看當(dāng)前函數(shù)，如果沒有定義往上一級(jí)鏈檢查
5) 如此往復(fù)，直到0級(jí)鏈
3.2 舉例
看下面代碼：
var num = 10;
var func1 = function() {
var num = 20;
var func2 = function() {
var num = 30;
alert(num);
};
func2();
};
var func2 = function() {
var num = 20;
var func3 = function() {
alert(num);
};
func3();
};
func1();
func2();
下面分析一下這段代碼：
-> 首先整段代碼是一個(gè)全局作用域，可以標(biāo)記為0級(jí)作用域鏈，那么久有一個(gè)數(shù)組
var link_0 = [ num, func1, func2 ];// 這里用偽代碼描述
-> 在這里func1和func2都是函數(shù)，因此引出兩條1級(jí)作用域鏈，分別為
var link_1 = { func1: [ num, func2 ] };// 這里用偽代碼描述
var link_1 = { func2: [ num, func3 ] };// 這里用偽代碼描述
-> 第一條1級(jí)鏈衍生出2級(jí)鏈
var link_2 = { func2: [ num ] };// 這里用偽代碼描述
-> 第二條1級(jí)鏈中沒有定義變量，是一個(gè)空鏈，就表示為
var link_2 = { func3: [ ] };
-> 將上面代碼整合一下，就可以將作用域鏈表示為：
// 這里用偽代碼描述
var link = [ // 0級(jí)鏈
num,
{ func1 : [ // 第一條1級(jí)鏈
num,
{ func2 : [ // 2級(jí)鏈
num
] }
]},
{ func2 : [ // 第二條1級(jí)鏈
num,
{ func3 : [] }
]}
];
-> 用圖像表示為
圖：01_01作用域鏈.bmp
注意：將鏈?zhǔn)降膱D用js代碼表現(xiàn)出來，再有高亮顯示的時(shí)候就非常清晰了.
有了這個(gè)作用域鏈的圖，那么就可以非常清晰的了解訪問變量是如何進(jìn)行的：
在需要使用變量時(shí)，首先在當(dāng)前的鏈上尋找變量，如果找到就直接使用，不會(huì)
向上再找；如果沒有找到，那么就向上一級(jí)作用域鏈尋找，直到0級(jí)作用域鏈.
如果能非常清晰的確定變量所屬的作用域鏈的級(jí)別，那么在分析JavaScript
代碼與使用閉包等高級(jí)JavaScript特性的時(shí)候就會(huì)非常容易(至少我是這樣哦).
三、變量名提升與函數(shù)名提升
有了作用域鏈與變量的訪問規(guī)則，那么就有一個(gè)非常棘手的問題. 先看下面
的JavaScript代碼:
var num = 10;
var func = function() {
alert(num);
var num = 20;
alert(num);
};
func();
執(zhí)行結(jié)果會(huì)是什么呢？你可以想一想，我先不揭曉答案.
先來分析一下這段代碼.
這段代碼中有一條0級(jí)作用域鏈，里面有成員num和func. 在func下是1級(jí)作用
域鏈，里面有成員num. 因此在調(diào)用函數(shù)func的時(shí)候，就會(huì)檢測(cè)到在當(dāng)前作用域中
變量num是定義過的，所以就會(huì)使用這個(gè)變量. 但是此時(shí)num并沒有賦值，因?yàn)榇?BR>碼是從上往下運(yùn)行的. 因此第一次打印的是 undefined，而第二次打印的便是20.
你答對(duì)了么？
像這樣將代碼定義在后面，而在前面使用的情況在JavaScript中也是常見的
問題. 這時(shí)就好像變量在一開始就定義了一樣，結(jié)果就如同下面代碼：
var num = 10;
var func = function() {
var num; // 感覺就是這里已經(jīng)定義了，但是沒有賦值一樣
alert(num);
var num = 20;
alert(num);
};
func();
那么這個(gè)現(xiàn)象常常稱為變量名提升. 同樣也有函數(shù)名提升這一說. 如下面代碼：
var func = function() {
alert("調(diào)用外面的函數(shù)");
};
var foo = function() {
func();
var func = function() {
alert("調(diào)用內(nèi)部的函數(shù)");
};
func();
};
好了，這段代碼結(jié)果如何？或則應(yīng)該有什么不一樣，我先不說沒留著讀者思考吧!
下一篇再做解答.
由于有了這些不同，因此在實(shí)際開發(fā)的時(shí)候，推薦將變量都寫在開始的地方，
也就是在函數(shù)的開頭將變量就定義好，類似于C語言的規(guī)定一樣. 這個(gè)在js庫中也
是這么完成的，如jQuery等.
四、小結(jié)
好了這篇文章主要是說明JavaScript的詞法作用域是怎么一回事兒，以及解釋
如何分析作用域鏈，和變量的訪問情況，最后留再一個(gè)練習(xí)收尾吧?。?！
看下面代碼執(zhí)行結(jié)果是什么：
if( ! "a" in window ) {
var a = "定義變量";
}
alert(a);
相關(guān)文章
JS?JSON.stringify()的5個(gè)使用場(chǎng)景詳解
JSON.stringify()方法用于將一個(gè)值轉(zhuǎn)為JSON字符串,該字符串符合JSON格式,并且可以被JSON.parse()方法還原,下面這篇文章主要給大家介紹了關(guān)于JS?JSON.stringify()的5使用場(chǎng)景,需要的朋友可以參考下2023-01-01
最近在工作中遇到一個(gè)需求，需要在不能顯示html格式的微信小程序中顯示html格式的內(nèi)容，通過查找相關(guān)的資料發(fā)現(xiàn)可以利用wxParse來實(shí)現(xiàn)，下面這篇文章就主要給大家介紹了微信小程序?qū)崿F(xiàn)顯示html格式內(nèi)容的方法，需要的朋友可以參考借鑒，下面來一起看看吧。2017-04-04
這篇文章主要介紹了JS取出兩個(gè)數(shù)組中的不同或相同元素，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
WEB頁子窗口(showModalDialog和showModelessDialog)使用說明
WEB頁子窗口(showModalDialog和showModelessDialog)使用說明，大家可以看下。2009-10-10
函數(shù)，在C語言之類的過程式語言中，是頂級(jí)的實(shí)體，而在Java/C++之類的面向?qū)ο蟮恼Z言中，則被對(duì)象包裝起來，一般稱為對(duì)象的方法。而在JavaScript中，函數(shù)本身與其他任何的內(nèi)置對(duì)象在低位上是沒有任何區(qū)別的，也就是說，函數(shù)本身也是對(duì)象2011-10-10
使用JavaScript 實(shí)現(xiàn)各種跨域的方法
本篇文章是對(duì)在JavaScript中實(shí)現(xiàn)各種跨域方法的介紹。需要的朋友參考下2013-05-05
本文整理了一些用于處理及遍歷XML文檔的DOM元素屬性與方法及動(dòng)態(tài)創(chuàng)建內(nèi)容時(shí)所用的W3C DOM屬性和方法，有需求的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
Javascript入門學(xué)習(xí)第五篇 js函數(shù)
上篇文章講了js中對(duì)象和數(shù)組的一些方法。 這章我們先說說函數(shù)，然后來點(diǎn)實(shí)戰(zhàn)。2008-07-07
三個(gè)js循環(huán)的關(guān)鍵字示例(for與while)
這篇文章主要介紹了三個(gè)js循環(huán)的關(guān)鍵字示例，主要是for與while,需要的朋友可以參考下2016-02-02
JavaScript中使用Math.floor()方法對(duì)數(shù)字取整
這篇文章主要介紹了JavaScript中使用Math.floor()方法對(duì)數(shù)字取整,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06