JavaScript中變量的作用域詳解
一、變量的分類
在JavaScript中變量分為兩種:
- 全局變量
- 局部變量
二、變量的作用域
1、局部變量的作用域
局部變量:在函數(shù)內(nèi)部定義的變量稱為局部變量,其作用域?yàn)樵摵瘮?shù)內(nèi)部,在該函數(shù)外部不能被訪問(wèn)。看下面的例子:
<!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ù)外部的變量稱為全局變量,其作用域是整個(gè)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
如果在定義變量的時(shí)候沒(méi)有使用var,那么默認(rèn)是全局變量,無(wú)論是在函數(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對(duì)象,是全局變量";
};
fn();
document.write("a="+a+"<br />");
document.write("b="+b+"<br />");
</script>
</head>
<body>
</body>
</html>結(jié)果:

c、應(yīng)盡量避免使用全局變量,以免團(tuán)隊(duì)開(kāi)發(fā)變量發(fā)生沖突。
以上所述是小編給大家介紹的JavaScript中變量的作用域,希望對(duì)大家有所幫助。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
簡(jiǎn)單解析JavaScript中的__proto__屬性
這篇文章主要介紹了JavaScript中的__proto__屬性,對(duì)于JavaScript中所謂的對(duì)象來(lái)講,它指向?qū)ο蟮脑蚿rototype,需要的朋友可以參考下2016-05-05
表單元素的submit()方法和onsubmit事件應(yīng)用概述
表單元素?fù)碛衧ubmit方法,同時(shí)也具有onsubmit事件句柄,用于監(jiān)聽(tīng)表單提交??梢允褂胑lemForm.submit();方法觸發(fā)表單提交,感興趣的朋友可以了解下,或許對(duì)你有所幫助2013-02-02
鍵盤 keycode的值 javascript時(shí)觸發(fā)事件時(shí)很有用的要素
鍵盤keycode的值 編寫javascript時(shí)觸發(fā)事件時(shí)很有用的要素,大家可以收藏一下。2009-11-11
JavaScript 關(guān)于事件循環(huán)機(jī)制的刨析
js里的事件循環(huán)機(jī)制十分有趣。從很多面試題也可以看出來(lái),考察簡(jiǎn)單的setTimeout也就是考察這個(gè)機(jī)制的,接下來(lái)本文帶你詳細(xì)了解它2021-11-11

