變量作用域

js作為一門腳本語(yǔ)言，他與c，java這些語(yǔ)言是不相同的。

全局變量

在js中聲明全局變量，有下面幾種方式：

1.在函數(shù)外通過(guò)var來(lái)聲明。

var test ="hello";
console.log(test);
function a(){
  test="xx";
  console.log(test);
}
a();
console.log(test);

結(jié)果：

hello
xx
xx

這種方式通過(guò)聲明的變量在任何地方都可進(jìn)行修改和使用。

2.在函數(shù)中隱士的聲明變量

function a(){
  test=22;
  console.log(test);
}
a();
console.log(test);

結(jié)果：

22
22

因?yàn)閖s是弱類型腳本語(yǔ)言，在使用之前無(wú)需定義，所以可以通過(guò)這種方式也能聲明全局變量。

來(lái)看一個(gè)反例：

var test="aa";
console.log(test);
function a(test){
  test=22;
  console.log(test);
}
a(test);
console.log(test);

結(jié)果：

aa
22
aa

可以看到在函數(shù)中修改了test值可是第二次在函數(shù)外打印的值沒(méi)有變。這是因?yàn)樵诤瘮?shù)的過(guò)程中只是進(jìn)行了值傳遞。局部變量覆蓋掉了全局變量，只是局部變量 在 修改。

因?yàn)樵诤瘮?shù)的參數(shù)內(nèi)定義的變量并不是全局變量。

反例二：

function a(){
  var test="aa";
  console.log(test);
}
a();
console.log(test);

結(jié)果

aa
notdefine

在函數(shù)內(nèi)通過(guò)var來(lái)聲明的變量是局部變量，函數(shù)外無(wú)法訪問(wèn)。

變量作用域

js的作用域和c與java這些語(yǔ)言的作用域也不相同，騷小孩在以前經(jīng)常會(huì)因?yàn)檫@個(gè)而頭疼，后來(lái)在認(rèn)真學(xué)習(xí)了以后才懂了。

1.js中沒(méi)有塊范圍。

if(1!=1){
  var y=c;
}
console.log(y)
 
if(1==1){
  var x=a;
}
console.log(x);

結(jié)果：

undefine
a

可以看到在if代碼塊定義的兩個(gè)變量，在if塊之外去打印，如果判斷成功的話，才會(huì)去執(zhí)行里邊的聲明語(yǔ)句，聲明語(yǔ)句執(zhí)行了，那么在代碼塊外邊就可訪問(wèn)到了。

也可以看出在代碼塊中聲明的變量也是全局變量。

2.js中的全局變量都會(huì)成為window的屬性

var x=0;
console.log(window.x);

結(jié)果：

0

3.變量提升

var c=0;
function a(){
  console.log(c);
}
a();

結(jié)果：

0

var c=0;
function a(){
  console.log(c);
  var c=11;
}
a();

結(jié)果：

undefine

可以看出在函數(shù)中加了一行聲明語(yǔ)句結(jié)果就會(huì)不同，這產(chǎn)生這樣的原因是什么呢？

其實(shí)第二個(gè)代碼塊的執(zhí)行順序是這樣的：

var c=0;
function a(){
  var c;
  console.log(c);
  c=11;
}
a();

在函數(shù)中他會(huì)先把聲明語(yǔ)句提升到第一行，但是并不提升賦值。然后局部變量覆蓋全局變量，在打印c的時(shí)候局部變量還沒(méi)來(lái)的

及賦值所以就是undefine。

變量提升不只會(huì)提升會(huì)執(zhí)行的變量，不會(huì)執(zhí)行的變量也會(huì)進(jìn)行提升：

var c=10;
function a(){
  console.log(c);
  if(false) {
    var c = 10;
  }
}
a();

結(jié)果：

undefine

因?yàn)樵趇f判斷中定義了局部變量c，雖然if條件不成立，但是也會(huì)進(jìn)行變量提升，所以打印c也是undefine；

4.let變量

通過(guò)上面的例子可以看到用var來(lái)定義變量的弊端：

1.var定義的變量沒(méi)有塊作用域；

2.var定義的全局變量會(huì)自動(dòng)添加全局window對(duì)象的屬性；

3.var變量會(huì)提前裝載（變量提升）；

let就是為了解決這些問(wèn)題而誕生的。

for(let i=0;i<5;i++){
  
}
console.log(i);

結(jié)果：

報(bào)錯(cuò)

在代碼塊中定義了let變量，在外部引用的時(shí)候不會(huì)存在。即存在塊作用域。

let i=10;
console.log(window.i);

結(jié)果：

undefine

let聲明的變量并不會(huì)成為window的屬性。

var c=10;
function a(){
  console.log(c);
  let c=1;
  console.log(c);
}
a();

在函數(shù)中存在變量與全局變量名相同的c，因此會(huì)覆蓋掉全局變量c，但是由于let不會(huì)提前裝載，所以在第一個(gè)打印語(yǔ)句打印c時(shí)會(huì)報(bào)錯(cuò)。

到此這篇關(guān)于JS中作用域以及變量范圍分析的文章就介紹到這了,更多相關(guān)JS變量作用域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論