javascript中錯(cuò)誤使用var造成undefined

更新時(shí)間：2016年03月31日 16:02:04 作者：MingChaoSun

這篇文章主要介紹了javascript中錯(cuò)誤使用var造成undefined的原因，實(shí)例分析了錯(cuò)誤使用var造成undefined的過程，感興趣的小伙伴們可以參考一下

在javascript中根據(jù)變量作用的范圍不同分為局部變量和全局變量，直接定義的變量是全局變量，全局變量可以被所有的腳本訪問；在函數(shù)中定義的變量是局部變量，局部變量只在函數(shù)內(nèi)有效。
如果全局變量和局部變量使用相同的變量名，則局部變量將會(huì)覆蓋全局變量。
例子代碼：

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>js中全局變量與局部變量</title> 
  </head> 
  <body> 
    <script type="text/javascript"> 
      var a = "全局變量"; 
      function test1() 
      { 
        var a = "局部變量"; 
         
        alert(a); 
      } 
       
      function test2() 
      { 
        alert(a); 
         
        var a = "局部變量"; 
         
        alert(a); 
      } 
       
      function test3() 
      { 
        alert(a); 
         
        a = "局部變量"; 
         
        alert(a); 
      } 
    </script> 
     
    <input type="button" value="test1" onclick="test1()"/> 
    <input type="button" value="test2" onclick="test2()"/> 
    <input type="button" value="test3" onclick="test3()"/> 
 
  </body> 
</html>

運(yùn)行的結(jié)果是這樣的：
點(diǎn)擊test1 ，彈出局部變量。
點(diǎn)擊test2，彈出undefined，再彈出局部變量

點(diǎn)擊test3，彈出全局變量，再彈出局部變量

這就是使用var和不使用的區(qū)別所在：
如果使用var，那么程序會(huì)強(qiáng)制定義一個(gè)新變量。
如果沒有使用var，系統(tǒng)會(huì)優(yōu)先在當(dāng)前上下文中搜索是否存在該變量，只有在不存在的前提下才會(huì)重新定義一個(gè)新變量。

test3中，使用的變量a均為全局變量，第一次直接輸出了全局變量，第二次是直接為全局變量賦值之后使用。
test1和test2中都存在在function中使用var定義同名新變量，會(huì)導(dǎo)致函數(shù)中的變量覆蓋掉全局變量。所以在test2中：第一次輸出的a是已經(jīng)被覆蓋了的局部變量a，但是沒有給予初值，所以會(huì)出現(xiàn)undefined這個(gè)結(jié)果。這樣使用變量實(shí)際上是錯(cuò)誤的，大家應(yīng)該避免。

您可能感興趣的文章:

相關(guān)文章

JS 實(shí)現(xiàn)請(qǐng)求調(diào)度器
這篇文章主要介紹了JS 實(shí)現(xiàn)請(qǐng)求調(diào)度器的方法，幫助大家更好的理解和學(xué)習(xí)使用js，感興趣的朋友可以了解下
2021-03-03
JavaScript實(shí)現(xiàn)的簡(jiǎn)單冪函數(shù)實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的簡(jiǎn)單冪函數(shù),實(shí)例分析了javascript實(shí)現(xiàn)冪運(yùn)算的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-04-04
微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)效果，手機(jī)登錄、填手機(jī)號(hào)獲取驗(yàn)證碼，倒計(jì)時(shí)后重新獲取效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
詳解javascript表單的Ajax提交插件的使用
本文主要介紹了javascript表單的Ajax提交插件的使用，具有一定的參考價(jià)值。下面跟著小編一起來看下吧
2016-12-12
js限制文本框只能輸入中文的方法
這篇文章主要介紹了js限制文本框只能輸入中文的方法,涉及javascript正則匹配及鼠標(biāo)事件的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-08-08
微信小程序開發(fā)中var that =this的用法詳解
這篇文章主要介紹了微信小程序開發(fā)中var that =this的用法詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
微信小程序單選框組應(yīng)用詳解
這篇文章主要為大家詳細(xì)介紹了微信小程序單選框組應(yīng)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
js 限制數(shù)字 js限制輸入實(shí)現(xiàn)代碼
在工作中經(jīng)常會(huì)遇到j(luò)s限制輸入方面的要求，本文將詳細(xì)介紹其實(shí)現(xiàn)原理，需要的朋友可以參考下
2012-12-12
JavaScript如何對(duì)圖片進(jìn)行黑白化
這篇文章主要介紹了JS對(duì)圖片進(jìn)行黑白化的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2018-04-04
javascript實(shí)現(xiàn)表格排序編輯拖拽縮放
這篇文章主要介紹了javascript實(shí)現(xiàn)表格排序編輯拖拽縮放的方法，效果非常不錯(cuò)，只是兼容性還有些問題，有待優(yōu)化。
2015-01-01