欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS中作用域以及變量范圍分析

 更新時(shí)間:2020年07月18日 22:30:50   作者:騷小孩呀  
這篇文章主要介紹了JS中作用域以及變量范圍分析,需要的朋友可以參考下

變量作用域

js作為一門腳本語言,他與c,java這些語言是不相同的。

全局變量

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

1.在函數(shù)外通過var來聲明。

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

結(jié)果:

hello
xx
xx

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

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

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

結(jié)果:

22
22

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

來看一個反例:

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ù)外打印的值沒有變。這是因?yàn)樵诤瘮?shù)的過程中只是進(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)通過var來聲明的變量是局部變量,函數(shù)外無法訪問。

變量作用域

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

1.js中沒有塊范圍。

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

結(jié)果:

undefine
a

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

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

2.js中的全局變量都會成為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ù)中加了一行聲明語句結(jié)果就會不同,這產(chǎn)生這樣的原因是什么呢?

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

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

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

及賦值所以就是undefine。

變量提升不只會提升會執(zhí)行的變量,不會執(zhí)行的變量也會進(jìn)行提升:

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

結(jié)果:

undefine

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

4.let變量

通過上面的例子可以看到用var來定義變量的弊端:

1.var定義的變量沒有塊作用域;

2.var定義的全局變量會自動添加全局window對象的屬性;

3.var變量會提前裝載(變量提升);

let就是為了解決這些問題而誕生的。

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

結(jié)果:

報(bào)錯

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

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

結(jié)果:

undefine

let聲明的變量并不會成為window的屬性。

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

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

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

相關(guān)文章

  • JavaScript中的console.profile()函數(shù)詳細(xì)介紹

    JavaScript中的console.profile()函數(shù)詳細(xì)介紹

    這篇文章主要介紹了JavaScript中的console.profile()函數(shù)詳細(xì)介紹,本文講解了console.profile()函數(shù)的瀏覽器支持情況、console.profile()的使用、Firebug中Profile按鈕的使用等內(nèi)容,需要的朋友可以參考下
    2014-12-12
  • javascript動態(tài)添加checkbox復(fù)選框的方法

    javascript動態(tài)添加checkbox復(fù)選框的方法

    這篇文章主要介紹了javascript動態(tài)添加checkbox復(fù)選框的方法的相關(guān)資料,需要的朋友可以參考下
    2015-12-12
  • 火狐下table中創(chuàng)建form導(dǎo)致兩個table之間出現(xiàn)空白

    火狐下table中創(chuàng)建form導(dǎo)致兩個table之間出現(xiàn)空白

    js加入form導(dǎo)致兩個table之間出現(xiàn)空白,還有另一種說法在table中創(chuàng)建form表單是不符合DOM標(biāo)準(zhǔn)的,會導(dǎo)致post失效,以及js數(shù)據(jù)傳輸失效
    2013-09-09
  • bootstrap折疊調(diào)用collapse()后data-parent不生效的快速解決辦法

    bootstrap折疊調(diào)用collapse()后data-parent不生效的快速解決辦法

    今天做的項(xiàng)目,用到了bootstrap的折疊功能,這個功能需要只展開一個折疊框,點(diǎn)擊一個就會自動隱藏另一個,實(shí)現(xiàn)起來也很容易,但是在測試時(shí)同事提出了一個bug,怎么解決呢?今天小編通過本教程給大家分享下
    2017-02-02
  • ES6基礎(chǔ)之解構(gòu)賦值(destructuring assignment)

    ES6基礎(chǔ)之解構(gòu)賦值(destructuring assignment)

    這篇文章主要介紹了ES6基礎(chǔ)之解構(gòu)賦值(destructuring assignment),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02
  • js中var、let、const之間的區(qū)別

    js中var、let、const之間的區(qū)別

    本文主要介紹了js中var、let、const之間的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • JS實(shí)現(xiàn)轉(zhuǎn)動隨機(jī)數(shù)抽獎特效代碼

    JS實(shí)現(xiàn)轉(zhuǎn)動隨機(jī)數(shù)抽獎特效代碼

    這篇文章主要為大家詳細(xì)介紹了一款轉(zhuǎn)動隨機(jī)數(shù)抽獎的JS特效代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2015-08-08
  • JavaScript實(shí)現(xiàn)簡單的Markdown語法解析器

    JavaScript實(shí)現(xiàn)簡單的Markdown語法解析器

    Markdown 是一種輕量級標(biāo)記語言, 它允許人們使用易讀易寫的純文本格式編寫文檔,然后轉(zhuǎn)換成有效的 XHTML(或者HTML)文檔。本文將利用JavaScript實(shí)現(xiàn)簡單的Markdown語法解析器,感興趣的可以了解一下
    2023-03-03
  • 前端構(gòu)建工具之gulp的配置與搭建詳解

    前端構(gòu)建工具之gulp的配置與搭建詳解

    gulpjs是一個前端構(gòu)建工具,與gruntjs相比,gulpjs無需寫一大堆繁雜的配置參數(shù),API也非常簡單,學(xué)習(xí)起來很容易,下面這篇文章主要給大家介紹了關(guān)于前端構(gòu)建工具之gulp的配置與搭建的相關(guān)資料,需要的朋友可以參考下。
    2017-06-06
  • javascript中等于(==)與全等(===)的區(qū)別說明

    javascript中等于(==)與全等(===)的區(qū)別說明

    等于(==)的情況下 只要值相同就返回True。而全等(===)的時(shí)候需要值和類型都要匹配才能返回True.
    2011-01-01

最新評論