Javascript學習筆記3 作用域
更新時間:2010年01月11日 00:27:16 作者:
每個寫過程序的人都不會對作用域這個概念陌生,那在這篇文章中就來談下Javascript的作用域。
在Javascript,全局環(huán)境本身就一個對象。在瀏覽器宿主中這個對象是window,而當Javascript用于其它非瀏覽器的宿主,如嵌入式的環(huán)境中,可能會是其它的對象。
在這里也糾正一個觀念,有很多人都認為Javascript只在瀏覽器中使用,其實Javascript也能在很多非Web情況下使用,據(jù)介紹Javascript在一些基于嵌入式的應用領域表現(xiàn)得也很出色,當然這些我也只是聽過傳說而已。
言歸正傳,當我們寫下:var i=1時,其實就是聲明了一個window作用域的一個變量。
而當我們寫下i=1時,是聲明了一個window的屬性。
看這樣一段代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這段代碼分別輸出的結(jié)果是:undefined world,welcome china, hello china.
我們來分別解釋:
在上文中,我們說過,在Javascript預編譯時,會把所有var變量創(chuàng)建,默認值為undefined,我們在這里可以舉一個例子:
我們可以寫這樣一段代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
當我們執(zhí)行運行這段腳本時,可以發(fā)現(xiàn),首先彈出undefined,然后回提示腳本錯誤,提示b不存在。由此就可以表明,a在預編譯的過程中就已經(jīng)被創(chuàng)建并且初始化為undefined,而b卻只能在實際運行時按順序去解釋。其實在預編譯后的Javascript代碼可以近乎理解如下:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
接下來我們可以談一下函數(shù)的作用域問題,每當代碼運行進入一個函數(shù)時,Javascript引擎就會自動創(chuàng)建一個新的作用域,然后把這個新作用域作為當前作用域的子作用域,然后把當前的代碼作用域切換到這個新作用域。當代碼退出函數(shù)時,這個作用域銷毀,把代碼作用域交還給他的父作用域。
好,準備工作差不多了,接下來我們就來解釋第一個問題:問什么會輸出undefined world。
首先代碼進行在預編譯,當進入 Test方法時,開啟一個新作用域,然后把全局作用域作為他的父作用域。然后對Test內(nèi)的方法進行預編譯,和上面的代碼一樣,Test方法被預編譯后方法體大致如下:
function Test() {
var a = undefined;
alert(a + " " + b);
var a = "welcome";
b = "china";
alert(a + " " + b);
}
當然,在當前作用域下無法找到b,于是他就會到他的父作用域下,也就是全局作用域找到了b=“world”。于是也就產(chǎn)生了這樣的結(jié)果。
第二次彈出welcome china,沒什么好說的。
第三次,彈出hello china。我們可以這樣理解,var a 只是 方法Test的一個局部變量,而b由于事先未聲明,因此他會去父作用域中去找到對應的定義。
好,接下來,我們再看一下這個方法的若干個變體。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
首先,我們將方法體內(nèi)的var a改成a,我們先不看答案,直接來分析,首先,在預編譯階段,方法體內(nèi)幾乎沒有任何改變,因此此時a和b一樣,都要去他們的父作用域中去尋找,因此第一次出的結(jié)果應該是hello world,第二次沒什么說的:welcome china,第三次由于a和b在本作用域內(nèi)都沒有事先定義,因此都是再改變父作用域內(nèi)的值,因此應該輸出welcome china.
我們繼續(xù):
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
和上面的分析一樣,應該輸出undefined undefined,welcome china,hello world.
繼續(xù):
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
應該是undefined world,welcome china,hello china.
經(jīng)試驗,都沒問題, 不知道你明白了么?
因此我們可以得出,每個變量在找不到自己的定義時,都會沿著作用鏈向上尋找,這樣就很可能會出現(xiàn)未預知的錯誤,給排錯添加了很多困難。更麻煩的是,還可能會對父作用域上的變量值進行修改,因此我們在聲明變量時應該盡量加上var,盡管Javascript并不強迫我們這樣做。
在這里也糾正一個觀念,有很多人都認為Javascript只在瀏覽器中使用,其實Javascript也能在很多非Web情況下使用,據(jù)介紹Javascript在一些基于嵌入式的應用領域表現(xiàn)得也很出色,當然這些我也只是聽過傳說而已。
言歸正傳,當我們寫下:var i=1時,其實就是聲明了一個window作用域的一個變量。
而當我們寫下i=1時,是聲明了一個window的屬性。
看這樣一段代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這段代碼分別輸出的結(jié)果是:undefined world,welcome china, hello china.
我們來分別解釋:
在上文中,我們說過,在Javascript預編譯時,會把所有var變量創(chuàng)建,默認值為undefined,我們在這里可以舉一個例子:
我們可以寫這樣一段代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
當我們執(zhí)行運行這段腳本時,可以發(fā)現(xiàn),首先彈出undefined,然后回提示腳本錯誤,提示b不存在。由此就可以表明,a在預編譯的過程中就已經(jīng)被創(chuàng)建并且初始化為undefined,而b卻只能在實際運行時按順序去解釋。其實在預編譯后的Javascript代碼可以近乎理解如下:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
接下來我們可以談一下函數(shù)的作用域問題,每當代碼運行進入一個函數(shù)時,Javascript引擎就會自動創(chuàng)建一個新的作用域,然后把這個新作用域作為當前作用域的子作用域,然后把當前的代碼作用域切換到這個新作用域。當代碼退出函數(shù)時,這個作用域銷毀,把代碼作用域交還給他的父作用域。
好,準備工作差不多了,接下來我們就來解釋第一個問題:問什么會輸出undefined world。
首先代碼進行在預編譯,當進入 Test方法時,開啟一個新作用域,然后把全局作用域作為他的父作用域。然后對Test內(nèi)的方法進行預編譯,和上面的代碼一樣,Test方法被預編譯后方法體大致如下:
復制代碼 代碼如下:
function Test() {
var a = undefined;
alert(a + " " + b);
var a = "welcome";
b = "china";
alert(a + " " + b);
}
當然,在當前作用域下無法找到b,于是他就會到他的父作用域下,也就是全局作用域找到了b=“world”。于是也就產(chǎn)生了這樣的結(jié)果。
第二次彈出welcome china,沒什么好說的。
第三次,彈出hello china。我們可以這樣理解,var a 只是 方法Test的一個局部變量,而b由于事先未聲明,因此他會去父作用域中去找到對應的定義。
好,接下來,我們再看一下這個方法的若干個變體。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
首先,我們將方法體內(nèi)的var a改成a,我們先不看答案,直接來分析,首先,在預編譯階段,方法體內(nèi)幾乎沒有任何改變,因此此時a和b一樣,都要去他們的父作用域中去尋找,因此第一次出的結(jié)果應該是hello world,第二次沒什么說的:welcome china,第三次由于a和b在本作用域內(nèi)都沒有事先定義,因此都是再改變父作用域內(nèi)的值,因此應該輸出welcome china.
我們繼續(xù):
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
和上面的分析一樣,應該輸出undefined undefined,welcome china,hello world.
繼續(xù):
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
應該是undefined world,welcome china,hello china.
經(jīng)試驗,都沒問題, 不知道你明白了么?
因此我們可以得出,每個變量在找不到自己的定義時,都會沿著作用鏈向上尋找,這樣就很可能會出現(xiàn)未預知的錯誤,給排錯添加了很多困難。更麻煩的是,還可能會對父作用域上的變量值進行修改,因此我們在聲明變量時應該盡量加上var,盡管Javascript并不強迫我們這樣做。
您可能感興趣的文章:
- JavaScript詞法作用域與調(diào)用對象深入理解
- JavaScript中的作用域鏈和閉包
- javascript作用域容易記錯的兩個地方分析
- 深入理解JavaScript系列(14) 作用域鏈介紹(Scope Chain)
- 淺談javascript中的作用域
- js變量以及其作用域詳解
- js使用函數(shù)綁定技術(shù)改變事件處理程序的作用域
- javascript權(quán)威指南 學習筆記之變量作用域分享
- javascript中的作用域scope介紹
- 關(guān)于JavaScript中var聲明變量作用域的推斷
- JavaScript.The.Good.Parts閱讀筆記(二)作用域&閉包&減緩全局空間污染
- JavaScript中實現(xiàn)塊作用域的方法
- Javascript 變量作用域 兩個可能會被忽略的小特性
- JavaScript的變量作用域深入理解
- Javascript 作用域使用說明
- JavaScript 變量作用域及閉包
- javascript 變量作用域 代碼分析
- javascript變量作用域使用中常見錯誤總結(jié)
相關(guān)文章
js阻止默認事件與js阻止事件冒泡示例分享 js阻止冒泡事件
嵌套的div元素,如果父級和子元素都綁定了一些事件,那么在點擊最內(nèi)層子元素時可能會觸發(fā)父級元素的事件,下面介紹一下js阻止默認事件與js阻止事件冒泡示例,大家參考使用吧2014-01-01JavaScript sub方法入門實例(把字符串顯示為下標)
這篇文章主要介紹了JavaScript sub方法入門實例,sub方法用于把字符串顯示為下標,需要的朋友可以參考下2014-10-10深入分析JavaScript 事件循環(huán)(Event Loop)
這篇文章主要介紹了JavaScript 事件循環(huán)(Event Loop)的的相關(guān)資料,文中講解非常細致,代碼幫助大家更好的理解和學習,感興趣的朋友可以了解下2020-06-06簡單總結(jié)JavaScript中的String字符串類型
就像其他語言那樣,js中的字符串類型可以表示一串字符,由雙引號包住,這里簡單總結(jié)JavaScript中的String字符串類型的一些基礎知識2016-05-05