淺談javascript中的作用域
更新時間：2012年04月07日 10:51:32 作者：
首先說明一下：Js中的作用域不同于其他語言的作用域，要特別注意
JS中作用域的概念：
表示變量或函數起作用的區(qū)域，指代了它們在什么樣的上下文中執(zhí)行，亦即上下文執(zhí)行環(huán)境。Javascript的作用域只有兩種：全局作用域和本地作用域，本地作用域是按照函數來區(qū)分的。
首先來看幾道題目：
1.
if(true){
var aa= "bb";
}
console.log(aa); //bb
for(var i = 0; i < 100; i++){
//do
}
console.log(i); //100
2.
var bb = '11111';
function aa() {
alert(bb);//undefine
var bb = 'test';
alert(bb);//test
var cc = "test1";
alert(age);//語法錯誤
}
aa();
3.
var test = '1111111';
function aa() {
alert(test);
}
function bb() {
var test = '22222222';
aa();
}
bb();//alert(1111111);
4.
alert(typeof aa); //function
alert(typeof bb); //undefined function aa() { //函數定義式
alert('I am 111111111');
};
var bb = function() { //函數表達式
}
alert(typeof bb);//function
5.
function aa(){
var bb = "test";
cc = "測試";
alert(bb);
}
aa();
alert(cc);//測試
alert(bb);//語法報錯
上面這5道題目全部概括了js中作用域的問題
可以總結出這么幾個觀點
一、無塊級作用域
從第一題中可以看出來，在{}中執(zhí)行后，變量并沒有被銷毀，還是保存在內存中的，因此我們可以訪問到的。
二、JavaScript中的函數運行在它們被定義的作用域里,而不是它們被執(zhí)行的作用域里.
這里提到函數的作用域鏈這個概念，在ECMA262中,是這樣的
任何執(zhí)行上下文時刻的作用域, 都是由作用域鏈(scope chain)來實現.
在一個函數被定義的時候, 會將它定義時候的scope chain鏈接到這個函數對象的[[scope]]屬性.
在一個函數對象被調用的時候，會創(chuàng)建一個活動對象(也就是一個對象), 然后對于每一個函數的形參，都命名為該活動對象的命名屬性, 然后將這個活動對象做為此時的作用域鏈(scope chain)最前端, 并將這個函數對象的[[scope]]加入到scope chain中.
所以題目3 結果是alert(1111111);
三、JS會提前處理function定義式 和var關鍵字
如題目4 開始alert(bb); //undefine ,alert(age)//語法報錯，這兩個有什么區(qū)別呢，原因就是后面有var bb =“test”,在初始化的時候提前處理了var 這個關鍵字，只是這個開始未賦值
將代碼修改成這樣的，可以看出來
var dd = '11111';
function aa() {
alert(bb);//undefine
var bb = 'test';
alert(bb);//test
var cc = "test1";
alert(age);//語法錯誤
}
aa();
alert(dd);//11111
alert(cc);//語法報錯
此處alert(bb)沒有報語法錯誤，alert(age)報語法錯誤。
但是請注意：
<script>
alert(typeof aa); //結果:undefined
</script>
<script>
function aa() {
alert('yupeng');
}
</script>
這說明js預編譯是以段為單元的。題目4同理
四、函數級作用域
函數里面的定義的變量，在函數執(zhí)行完后就銷毀了，不占有內存區(qū)域了。
所以題目2最后的alert(cc);語法報錯，題目5最后到 alert(bb)同理
表示變量或函數起作用的區(qū)域，指代了它們在什么樣的上下文中執(zhí)行，亦即上下文執(zhí)行環(huán)境。Javascript的作用域只有兩種：全局作用域和本地作用域，本地作用域是按照函數來區(qū)分的。
首先來看幾道題目：
1.
復制代碼 代碼如下:
if(true){
var aa= "bb";
}
console.log(aa); //bb
for(var i = 0; i < 100; i++){
//do
}
console.log(i); //100
2.
復制代碼 代碼如下:
var bb = '11111';
function aa() {
alert(bb);//undefine
var bb = 'test';
alert(bb);//test
var cc = "test1";
alert(age);//語法錯誤
}
aa();
3.
復制代碼 代碼如下:
var test = '1111111';
function aa() {
alert(test);
}
function bb() {
var test = '22222222';
aa();
}
bb();//alert(1111111);
4.
復制代碼 代碼如下:
alert(typeof aa); //function
alert(typeof bb); //undefined function aa() { //函數定義式
alert('I am 111111111');
};
var bb = function() { //函數表達式
}
alert(typeof bb);//function
5.
復制代碼 代碼如下:
function aa(){
var bb = "test";
cc = "測試";
alert(bb);
}
aa();
alert(cc);//測試
alert(bb);//語法報錯
上面這5道題目全部概括了js中作用域的問題
可以總結出這么幾個觀點
一、無塊級作用域
從第一題中可以看出來，在{}中執(zhí)行后，變量并沒有被銷毀，還是保存在內存中的，因此我們可以訪問到的。
二、JavaScript中的函數運行在它們被定義的作用域里,而不是它們被執(zhí)行的作用域里.
這里提到函數的作用域鏈這個概念，在ECMA262中,是這樣的
任何執(zhí)行上下文時刻的作用域, 都是由作用域鏈(scope chain)來實現.
在一個函數被定義的時候, 會將它定義時候的scope chain鏈接到這個函數對象的[[scope]]屬性.
在一個函數對象被調用的時候，會創(chuàng)建一個活動對象(也就是一個對象), 然后對于每一個函數的形參，都命名為該活動對象的命名屬性, 然后將這個活動對象做為此時的作用域鏈(scope chain)最前端, 并將這個函數對象的[[scope]]加入到scope chain中.
所以題目3 結果是alert(1111111);
三、JS會提前處理function定義式 和var關鍵字
如題目4 開始alert(bb); //undefine ,alert(age)//語法報錯，這兩個有什么區(qū)別呢，原因就是后面有var bb =“test”,在初始化的時候提前處理了var 這個關鍵字，只是這個開始未賦值
將代碼修改成這樣的，可以看出來
復制代碼 代碼如下:
var dd = '11111';
function aa() {
alert(bb);//undefine
var bb = 'test';
alert(bb);//test
var cc = "test1";
alert(age);//語法錯誤
}
aa();
alert(dd);//11111
alert(cc);//語法報錯
此處alert(bb)沒有報語法錯誤，alert(age)報語法錯誤。
但是請注意：
復制代碼 代碼如下:
<script>
alert(typeof aa); //結果:undefined
</script>
<script>
function aa() {
alert('yupeng');
}
</script>
這說明js預編譯是以段為單元的。題目4同理
四、函數級作用域
函數里面的定義的變量，在函數執(zhí)行完后就銷毀了，不占有內存區(qū)域了。
所以題目2最后的alert(cc);語法報錯，題目5最后到 alert(bb)同理
相關文章
這篇文章主要介紹了JS實現圖片產生波紋一樣flash效果的方法,通過遞歸調用自定義函數f_wave實現波紋效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
本文主要介紹了webpack之基礎打包優(yōu)化的實現，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下<BR>2022-02-02
這篇文章主要為大家詳細介紹了微信小程序實現簡易封裝彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要給大家介紹了關于Javascript中引用類型傳遞的知識點，文中介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-03-03
這篇文章主要為大家詳細介紹了支付寶小程序實現省市區(qū)三級聯動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了javascript實現簡單的可隨機變色網頁計算器,具有基本的四則運算與背景色隨機變換功能,需要的朋友可以參考下2016-12-12
JSON格式的時間/Date(2367828670431)/格式轉為正常的年-月-日 格式的代碼
這篇文章主要介紹了JSON格式的時間/Date(2367828670431)/格式轉為正常的年-月-日 格式的代碼的相關資料,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了JavaScript數組實例的9個方法,文章圍繞主題展開詳細的內容介紹沒具有一定的參考價值，需要的朋友可以參考一下2022-07-07
本篇文章主要是對JavaScript簡單實現鼠標拖動選擇功能的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
JavaScriptCore是webkit的一個重要組成部分，主要是對JS進行解析和提供執(zhí)行環(huán)境。下面這篇文章主要給大家介紹了使用JavaScriptCore實現OC和JS交互的相關資料，文中介紹的非常詳細，需要的朋友可以參考學習，下面來一起看看吧。2017-03-03