網(wǎng)易JS面試題與Javascript詞法作用域說明
更新時(shí)間：2010年11月09日 10:01:16 作者：
Javascript函數(shù)在定義它們的作用域里運(yùn)行，而不是在執(zhí)行它們的作用域里運(yùn)行。
調(diào)用對(duì)象位于作用域鏈的前端，局部變量（在函數(shù)內(nèi)部用var聲明的變量）、函數(shù)參數(shù)及Arguments對(duì)象都在函數(shù)內(nèi)的作用域中——這意味著它們隱藏了作用域鏈更上層的任何同名的屬性。
2010年9月14日，我去參加網(wǎng)易網(wǎng)頁(yè)工程師招聘會(huì)，應(yīng)聘JS工程師職位。有幸參加筆試，然后有幸栽在筆試，呵呵。廢話少說，抓出音響極深的一題重新研究研究。
題目大概是：寫出如下代碼的輸出結(jié)果并進(jìn)行分析
var tt = 'aa';
function test(){
alert(tt);
var tt = 'dd';
alert(tt);
}
test();
“太簡(jiǎn)單了！”這是我當(dāng)時(shí)看到這個(gè)題目是的第一想法，于是輕率答題竟成我的致命之傷。我的答案是——aa和dd，解析：第一次輸出全局變量的結(jié)果，然后局部變量tt覆蓋全局變量所引用的值，所以第二次輸出結(jié)果是dd。
任何人見我如此作答，都會(huì)認(rèn)為我是在掃盲——想法及其幼稚（我也這么認(rèn)為）！
網(wǎng)易啊，怎么可能會(huì)滿意于這種答案！
正確的答案應(yīng)該是：undefined和dd
為什么第一次alert的結(jié)果是undefined呢？要解釋得清楚明白需要用到Javascript的詞法作用域。
Javascript中的函數(shù)“在定義它們的作用域里運(yùn)行，而不是在執(zhí)行它們的作用域里運(yùn)行”，這是權(quán)威指南里抽象而精辟的總結(jié)。
Javascript的邏輯默認(rèn)在一個(gè)全局作用域中執(zhí)行，如以上程序段中的“var tt='aa';”就是定義一個(gè)全局作用域的全局變量（如果以上代碼段不是摘自某個(gè)函數(shù)鏈的話）。而test()函數(shù)內(nèi)部的邏輯必須在原有的作用域（全局 作用域）鏈再添加test函數(shù)本身的作用域（局部性）——這些思想幾乎在每一種語(yǔ)言中都是如此定義的，然而Javascript作用域鏈的特別之處在于函 數(shù)內(nèi)部能夠嵌套函數(shù)的定義（這是閉包的基礎(chǔ)。注：在JS中函數(shù)是唯一形式的代碼作用域）
嵌套的內(nèi)部函數(shù)可以調(diào)用外部函數(shù)（被嵌套的函數(shù)）的變量和其他嵌套函數(shù)（函數(shù)是一種數(shù)據(jù)）。如果是在外部函數(shù)內(nèi)調(diào)用嵌套函數(shù)，那么調(diào)用對(duì)象不變，當(dāng) 外部函數(shù)執(zhí)行完畢后所有數(shù)據(jù)（包括外部函數(shù)和嵌套的內(nèi)部函數(shù)）都將被垃圾回收機(jī)制收集——這一點(diǎn)還不能體現(xiàn)出‘閉包'的精華。有一種情況，就是 Javascript允許外部調(diào)用嵌套的內(nèi)部函數(shù)，即使被嵌套函數(shù)已經(jīng)被‘垃圾收集'——最常見的就是在‘某個(gè)函數(shù)'中用其嵌套的內(nèi)部函數(shù)定義某些元素的 響應(yīng)事件，頁(yè)面載入的時(shí)候被嵌套函數(shù)（‘某個(gè)函數(shù)'）已經(jīng)執(zhí)行完畢（被垃圾回收），但當(dāng)事件觸發(fā)的時(shí)候仍然會(huì)有響應(yīng)的動(dòng)作，而且響應(yīng)函數(shù)中還可能調(diào)用到在 被嵌套函數(shù)（‘某個(gè)函數(shù)'）中定義的變量最終值（不是被垃圾回收了嗎？）。
關(guān)于閉包的知識(shí)和示例有很多資料可供查詢，我不想敘述。
本文的重點(diǎn)是以下非常重要的細(xì)節(jié)：
調(diào)用對(duì)象位于作用域鏈的前端，局部變量（在函數(shù)內(nèi)部用var聲明的變量）、函數(shù)參數(shù)及Arguments對(duì)象都在函數(shù)內(nèi)的作用域中——這意味著它們隱藏了作用域鏈更上層的任何同名的屬性。
即，在以上程序片段中，test函數(shù)內(nèi)部的“var tt='dd'”將會(huì)致使“var tt='aa'”在test函數(shù)被調(diào)用時(shí)完全被隱藏。而且，tt是在第一個(gè)alert語(yǔ)句之后定義，所以在調(diào)用到第一個(gè)alert時(shí)，tt是還沒有被賦值 的。這樣說可能會(huì)清楚一點(diǎn)，即，在定義test函數(shù)時(shí)，當(dāng)定義第一個(gè)alert(tt)時(shí)，這里會(huì)記錄tt是作用域鏈中的一個(gè)變量但不會(huì)記錄它（tt）的 值，函數(shù)定義完畢后tt就添加到作用域里，所以第一個(gè)alert語(yǔ)句能夠找到該作用域里的tt（即，相當(dāng)于找到一個(gè)已經(jīng)在函數(shù)內(nèi)部聲明，但未被賦值的 tt）。
以上程序片段的執(zhí)行結(jié)果與以下片段的結(jié)果相同：
var tt = 'aa';
function test(){
var tt;
alert(tt);
tt = 'dd';
alert(tt);
}
test();
Javascript的作用域不可簡(jiǎn)單的用C++等語(yǔ)言的思維來理解??！C++在調(diào)用函數(shù)之前必須先聲明或定義，而Javascript沒必要。在 Javascript中可以先調(diào)用函數(shù)，后再定義（不用在調(diào)用之前作任何聲明）。因?yàn)樵谡{(diào)用函數(shù)時(shí)，Javascript是向作用域鏈要函數(shù)的定義（函數(shù)在定義它們的作用域里運(yùn)行，而不是在執(zhí)行它們的作用域里運(yùn)行）
如以上代碼寫成：
var tt = 'aa';
test(); //先調(diào)用后再定義
function test(){
alert(tt); //undefined
var tt = 'dd';
alert(tt); //dd
}
以上代碼片段雖然能夠得到相同的結(jié)果，但最好不要那樣寫啦，習(xí)慣不好，代碼不好維護(hù)。
2010年9月14日，我去參加網(wǎng)易網(wǎng)頁(yè)工程師招聘會(huì)，應(yīng)聘JS工程師職位。有幸參加筆試，然后有幸栽在筆試，呵呵。廢話少說，抓出音響極深的一題重新研究研究。
題目大概是：寫出如下代碼的輸出結(jié)果并進(jìn)行分析
復(fù)制代碼 代碼如下:
var tt = 'aa';
function test(){
alert(tt);
var tt = 'dd';
alert(tt);
}
test();
“太簡(jiǎn)單了！”這是我當(dāng)時(shí)看到這個(gè)題目是的第一想法，于是輕率答題竟成我的致命之傷。我的答案是——aa和dd，解析：第一次輸出全局變量的結(jié)果，然后局部變量tt覆蓋全局變量所引用的值，所以第二次輸出結(jié)果是dd。
任何人見我如此作答，都會(huì)認(rèn)為我是在掃盲——想法及其幼稚（我也這么認(rèn)為）！
網(wǎng)易啊，怎么可能會(huì)滿意于這種答案！
正確的答案應(yīng)該是：undefined和dd
為什么第一次alert的結(jié)果是undefined呢？要解釋得清楚明白需要用到Javascript的詞法作用域。
Javascript中的函數(shù)“在定義它們的作用域里運(yùn)行，而不是在執(zhí)行它們的作用域里運(yùn)行”，這是權(quán)威指南里抽象而精辟的總結(jié)。
Javascript的邏輯默認(rèn)在一個(gè)全局作用域中執(zhí)行，如以上程序段中的“var tt='aa';”就是定義一個(gè)全局作用域的全局變量（如果以上代碼段不是摘自某個(gè)函數(shù)鏈的話）。而test()函數(shù)內(nèi)部的邏輯必須在原有的作用域（全局 作用域）鏈再添加test函數(shù)本身的作用域（局部性）——這些思想幾乎在每一種語(yǔ)言中都是如此定義的，然而Javascript作用域鏈的特別之處在于函 數(shù)內(nèi)部能夠嵌套函數(shù)的定義（這是閉包的基礎(chǔ)。注：在JS中函數(shù)是唯一形式的代碼作用域）
嵌套的內(nèi)部函數(shù)可以調(diào)用外部函數(shù)（被嵌套的函數(shù)）的變量和其他嵌套函數(shù)（函數(shù)是一種數(shù)據(jù)）。如果是在外部函數(shù)內(nèi)調(diào)用嵌套函數(shù)，那么調(diào)用對(duì)象不變，當(dāng) 外部函數(shù)執(zhí)行完畢后所有數(shù)據(jù)（包括外部函數(shù)和嵌套的內(nèi)部函數(shù)）都將被垃圾回收機(jī)制收集——這一點(diǎn)還不能體現(xiàn)出‘閉包'的精華。有一種情況，就是 Javascript允許外部調(diào)用嵌套的內(nèi)部函數(shù)，即使被嵌套函數(shù)已經(jīng)被‘垃圾收集'——最常見的就是在‘某個(gè)函數(shù)'中用其嵌套的內(nèi)部函數(shù)定義某些元素的 響應(yīng)事件，頁(yè)面載入的時(shí)候被嵌套函數(shù)（‘某個(gè)函數(shù)'）已經(jīng)執(zhí)行完畢（被垃圾回收），但當(dāng)事件觸發(fā)的時(shí)候仍然會(huì)有響應(yīng)的動(dòng)作，而且響應(yīng)函數(shù)中還可能調(diào)用到在 被嵌套函數(shù)（‘某個(gè)函數(shù)'）中定義的變量最終值（不是被垃圾回收了嗎？）。
關(guān)于閉包的知識(shí)和示例有很多資料可供查詢，我不想敘述。
本文的重點(diǎn)是以下非常重要的細(xì)節(jié)：
調(diào)用對(duì)象位于作用域鏈的前端，局部變量（在函數(shù)內(nèi)部用var聲明的變量）、函數(shù)參數(shù)及Arguments對(duì)象都在函數(shù)內(nèi)的作用域中——這意味著它們隱藏了作用域鏈更上層的任何同名的屬性。
即，在以上程序片段中，test函數(shù)內(nèi)部的“var tt='dd'”將會(huì)致使“var tt='aa'”在test函數(shù)被調(diào)用時(shí)完全被隱藏。而且，tt是在第一個(gè)alert語(yǔ)句之后定義，所以在調(diào)用到第一個(gè)alert時(shí)，tt是還沒有被賦值 的。這樣說可能會(huì)清楚一點(diǎn)，即，在定義test函數(shù)時(shí)，當(dāng)定義第一個(gè)alert(tt)時(shí)，這里會(huì)記錄tt是作用域鏈中的一個(gè)變量但不會(huì)記錄它（tt）的 值，函數(shù)定義完畢后tt就添加到作用域里，所以第一個(gè)alert語(yǔ)句能夠找到該作用域里的tt（即，相當(dāng)于找到一個(gè)已經(jīng)在函數(shù)內(nèi)部聲明，但未被賦值的 tt）。
以上程序片段的執(zhí)行結(jié)果與以下片段的結(jié)果相同：
復(fù)制代碼 代碼如下:
var tt = 'aa';
function test(){
var tt;
alert(tt);
tt = 'dd';
alert(tt);
}
test();
Javascript的作用域不可簡(jiǎn)單的用C++等語(yǔ)言的思維來理解??！C++在調(diào)用函數(shù)之前必須先聲明或定義，而Javascript沒必要。在 Javascript中可以先調(diào)用函數(shù)，后再定義（不用在調(diào)用之前作任何聲明）。因?yàn)樵谡{(diào)用函數(shù)時(shí)，Javascript是向作用域鏈要函數(shù)的定義（函數(shù)在定義它們的作用域里運(yùn)行，而不是在執(zhí)行它們的作用域里運(yùn)行）
如以上代碼寫成：
復(fù)制代碼 代碼如下:
var tt = 'aa';
test(); //先調(diào)用后再定義
function test(){
alert(tt); //undefined
var tt = 'dd';
alert(tt); //dd
}
以上代碼片段雖然能夠得到相同的結(jié)果，但最好不要那樣寫啦，習(xí)慣不好，代碼不好維護(hù)。
相關(guān)文章
讓div運(yùn)動(dòng)起來 js實(shí)現(xiàn)緩動(dòng)效果
讓div運(yùn)動(dòng)起來，這篇文章主要介紹了js實(shí)現(xiàn)緩動(dòng)效果的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
本文主要分享了原生js實(shí)現(xiàn)商品放大鏡效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了JS仿hao123導(dǎo)航頁(yè)面圖片輪播效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-09-09
這篇文章主要為大家詳細(xì)介紹了js圖片放大鏡效果的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要給大家介紹了關(guān)于js添加元素的簡(jiǎn)單方式,文中通過代碼示例將每種實(shí)現(xiàn)的方法都介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-10-10
JS設(shè)計(jì)模式之責(zé)任鏈模式應(yīng)用詳解
JS責(zé)任鏈模式是一種行為型設(shè)計(jì)模式,它允許多個(gè)對(duì)象按照順序處理請(qǐng)求,直到其中一個(gè)對(duì)象能夠處理請(qǐng)求為止,這樣的對(duì)象鏈被稱為責(zé)任鏈,本文將給大家詳細(xì)講講責(zé)任鏈模式在JS中的應(yīng)用,需要的朋友可以參考下2023-08-08![IE和Firefox的Javascript兼容性總結(jié)[推薦收藏]](http://img.jbzj.com/images/xgimg/bcimg6.png)
IE和Firefox的Javascript兼容性總結(jié)[推薦收藏]
長(zhǎng)久以來JavaScript兼容性一直是Web開發(fā)者的一個(gè)主要問題。在正式規(guī)范、事實(shí)標(biāo)準(zhǔn)以及各種實(shí)現(xiàn)之間的存在的差異讓許多開發(fā)者日夜煎熬2011-10-10
這篇文章主要介紹了element-ui?dialog彈窗增加全屏功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
Javascript是一門基于對(duì)象的動(dòng)態(tài)語(yǔ)言，也就是說，所有東西都是對(duì)象，一個(gè)很典型的例子就是函數(shù)也被視為普通的對(duì)象。Javascript可以通過一定的設(shè)計(jì)模式來實(shí)現(xiàn)面向?qū)ο蟮木幊?，其中this指針就是實(shí)現(xiàn)面向?qū)ο蟮囊粋€(gè)很重要的特性。2015-07-07
這篇文章主要介紹了JS合并兩個(gè)數(shù)組的3種方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10