JavaScript中變量的作用域詳解
一、變量的分類
在JavaScript中變量分為兩種:
- 全局變量
- 局部變量
二、變量的作用域
1、局部變量的作用域
局部變量:在函數(shù)內(nèi)部定義的變量稱為局部變量,其作用域為該函數(shù)內(nèi)部,在該函數(shù)外部不能被訪問??聪旅娴睦樱?/p>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>局部變量作用域</title> <script> // 定義函數(shù)fn function fn(){ var a=5;// 定義局部變量 document.write(a); }; // 調(diào)用函數(shù)fn fn(); // 定義函數(shù)fn2 function fn2(){ document(a); }; // 調(diào)用函數(shù)fn2 fn2(); </script> </head> <body> </body> </html>
結(jié)果:
2、全局變量
全局變量:定義在函數(shù)外部的變量稱為全局變量,其作用域是整個JavaScript代碼塊??聪旅娴睦樱?/p>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>全局變量作用域</title> <script> var number; // 全局變量 function fn(){ number=5; document.write("number的值是:"+number+"<br />"); }; function fn2(){ ++number; document.write("number的值是:"+number+"<br />"); } fn(); fn2(); </script> </head> <body> </body> </html>
結(jié)果:
注意:
a、如果在函數(shù)內(nèi)定義了和全局變量相同名稱的局部變量,那么在函數(shù)內(nèi)部使用就近原則:即在函數(shù)內(nèi)部局部變量起作用。
看下面的例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>全局變量作用域</title> <script> var number; // 全局變量 /* function fn(){ number=5; document.write("number的值是:"+number+"<br />"); }; function fn2(){ ++number; document.write("number的值是:"+number+"<br />"); } */ // 就近原則 function fn(){ var number="我是局部變量"; document.write("number的值是:"+number+"<br />"); }; function fn2(){ number="我是全局變量" document.write("number的值是:"+number+"<br />"); } fn(); fn2(); </script> </head> <body> </body> </html>
結(jié)果:
b、全局變量window
如果在定義變量的時候沒有使用var,那么默認(rèn)是全局變量,無論是在函數(shù)外部還是在函數(shù)內(nèi)部定義變量??聪旅娴睦樱?/p>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>全局變量作用域</title> <script> var number; // 全局變量 /* function fn(){ number=5; document.write("number的值是:"+number+"<br />"); }; function fn2(){ ++number; document.write("number的值是:"+number+"<br />"); } */ // 就近原則 /* function fn(){ var number="我是局部變量"; document.write("number的值是:"+number+"<br />"); }; function fn2(){ number="我是全局變量" document.write("number的值是:"+number+"<br />"); } fn(); fn2(); */ // windows // 相當(dāng)于window.a a=12; function fn(){ // 相當(dāng)于window.b b="我是window對象,是全局變量"; }; fn(); document.write("a="+a+"<br />"); document.write("b="+b+"<br />"); </script> </head> <body> </body> </html>
結(jié)果:
c、應(yīng)盡量避免使用全局變量,以免團(tuán)隊開發(fā)變量發(fā)生沖突。
以上所述是小編給大家介紹的JavaScript中變量的作用域,希望對大家有所幫助。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
表單元素的submit()方法和onsubmit事件應(yīng)用概述
表單元素?fù)碛衧ubmit方法,同時也具有onsubmit事件句柄,用于監(jiān)聽表單提交??梢允褂胑lemForm.submit();方法觸發(fā)表單提交,感興趣的朋友可以了解下,或許對你有所幫助2013-02-02鍵盤 keycode的值 javascript時觸發(fā)事件時很有用的要素
鍵盤keycode的值 編寫javascript時觸發(fā)事件時很有用的要素,大家可以收藏一下。2009-11-11JavaScript 關(guān)于事件循環(huán)機(jī)制的刨析
js里的事件循環(huán)機(jī)制十分有趣。從很多面試題也可以看出來,考察簡單的setTimeout也就是考察這個機(jī)制的,接下來本文帶你詳細(xì)了解它2021-11-11