快捷導(dǎo)航

JS變量及其作用域

更新時(shí)間：2017年03月29日 14:54:30 作者：liujian_laohan

本文主要介紹了JS變量及其作用域的相關(guān)知識。具有很好的參考價(jià)值，下面跟著小編一起來看下吧

1、變量及其作用域：變量分為“全局變量”和“局部變量”，“全局變量”申明在函數(shù)外部，可供所有函數(shù)使用，而“局部變量”申明在函數(shù)體內(nèi)部，只能在定義該變量的函數(shù)體內(nèi)使用。

（備注：在申明變量時(shí)沒有var關(guān)鍵字，而是直接賦值的變量均為全局變量）

<script type="text/javascript">
  function main() {　　
    n = 10;//這里的n為全局變量，可以被外部直接使用
  }
  main();
  alert(n);
</script>

2、在函數(shù)體內(nèi)，局部變量的優(yōu)先級高于全局變量。

<script type="text/javascript">
  //網(wǎng)上看到的我認(rèn)為很有代表性的一個(gè)例子，在函數(shù)體外部和內(nèi)部都申明了相同名字的變量，變量的作用域問題，例子如下：
  var n = 1;
  function test() {
    alert(n); //這里的a并不是全局變量，原因是函數(shù)體第四行申明了一個(gè)相同重名的局部變
         //量a，如果把第四行a的申明注釋掉，那么這里的a顯示1，為全局變量。所以得
         //出結(jié)論：全局變量a被局部變量a覆蓋了。
         //說明了JS函數(shù)在test()在執(zhí)行前，函數(shù)體內(nèi)的變量a都指向了局部變量，但本
         //行輸出的a在執(zhí)行過程中還沒有被賦值，所以顯示undefined。
    n = 2;
    alert(n);
    var n; //本行申明局部變量a
    alert(n);
  }
    test();
    alert(n);
</script>

按照我的理解，上面例子最后輸出的答案應(yīng)該是：1 2 2 1；但是正確的答案是：undefined 2 2 1；原因就是函數(shù)體外部和內(nèi)部都申明了相同名字的變量時(shí)，局部變量覆蓋了全局變量。

3、外部怎么讀取函數(shù)體內(nèi)部的局部變量呢？

一般來說，只有函數(shù)體內(nèi)部可以直接得到外部的全局變量，但是外部要得到函數(shù)體內(nèi)部的局部變量是不行的。但是，通過在函數(shù)體內(nèi)部再定義一個(gè)函數(shù)返回局部變量，再從外部調(diào)用函數(shù)就能實(shí)現(xiàn)了。

<script type="text/javascript">
  function f1() {　　　　
    var n = 10;　　　　
    function f2() {//在f1()內(nèi)部再定義f2()，通過f2()訪問f1()中的局部變量　　　　　　
      alert(n);　　　　
    }　　　　
    return f2;//返回f1()局部變量n
  }　　
  var result = f1();　//在外部調(diào)用f1()函數(shù)，就能獲取局部變量n的值
  result(); // 10，即為n的值
</script>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

javascript 獲取模態(tài)窗口的滾動位置代碼
模態(tài)窗口的滾動位置獲取辦法還有不知道的嗎？下面的方法或許對大家有所幫助，感興趣的朋友可以了解下，希望對大家有所幫助
2013-08-08
使用watch在微信小程序中實(shí)現(xiàn)全局狀態(tài)共享
這篇文章主要給大家介紹了關(guān)于如何使用watch在小程序中實(shí)現(xiàn)全局狀態(tài)共享的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
JS事件在IE與FF中的區(qū)別詳細(xì)解析
這篇文章主要是對JS事件在IE與FF中的區(qū)別進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
JS獲得選取checkbox整行數(shù)據(jù)的方法
這篇文章主要介紹了JS獲得選取checkbox整行數(shù)據(jù)的方法,涉及使用js對DOM節(jié)點(diǎn)的操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-01-01
Flexible.js可伸縮布局實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Flexible.js可伸縮布局實(shí)現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-11-11
JS數(shù)據(jù)類型判斷的9種方式總結(jié)
談到JS的類型判斷大家應(yīng)該都不陌生,下面這篇文章主要給大家介紹了關(guān)于JS數(shù)據(jù)類型判斷的9種方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
微信小程序MUI導(dǎo)航欄透明漸變功能示例(通過改變r(jià)gba的a值實(shí)現(xiàn))
這篇文章主要介紹了微信小程序MUI導(dǎo)航欄透明漸變功能,結(jié)合實(shí)例形式分析了通過改變r(jià)gba的a值實(shí)現(xiàn)透明度漸變功能的相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
小程序簡單兩欄瀑布流效果的實(shí)現(xiàn)
這篇文章主要介紹了小程序簡單兩欄瀑布流效果的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
使用webpack和rollup打包組件庫的方法
這篇文章主要介紹了使用webpack和rollup打包組件庫的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02
微信小程序自定義toast組件的方法詳解【含動畫】
這篇文章主要介紹了微信小程序自定義toast組件的方法,結(jié)合實(shí)例形式詳細(xì)分析了微信小程序自定義toast組件的步驟、實(shí)現(xiàn)方法及相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05