快捷導(dǎo)航

解決javascript 全局變量失效的問題

更新時(shí)間：2021年01月25日 12:10:15 作者：白夜

這篇文章主要介紹了解決javascript 全局變量失效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

問題：

我在js文件中定義了一個(gè)全局變量：var a，在函數(shù)B()中給a賦值，然后在函數(shù)C（）中訪問a結(jié)果發(fā)現(xiàn)a居然是undefined

找原因：

查了不少資料感覺和我的情況都不同，仔細(xì)分析了一下，發(fā)現(xiàn)了一些端倪：我的操作是這樣的，我在A頁面中加了iframe，iframe的地址是B，我在A頁面中調(diào)用了B（）函數(shù)，然后又在B頁面中調(diào)用了C（）函數(shù)。問題就出在這了，javascript的全局變量的作用范圍實(shí)際上是只在當(dāng)前頁面起作用（仔細(xì)想一下也應(yīng)是這樣，要不然豈不是要亂套了），從這個(gè)意義上講javascript的全局變量也談不上是全局變量，它只在當(dāng)前頁面中起作用，我們要是把當(dāng)前頁面看做一個(gè)類的話，那我們就完全可以把這中全局變量看做為private的。

至此，問題原因就很簡單了，我在A頁面中訪問的a變量和我在B頁面中訪問的a變量中訪問的a變來那個(gè)并不是同一個(gè)變量，就好像是一個(gè)類里面的private變量，我在A實(shí)例中訪問的和我在B實(shí)例中訪問的并不是同一個(gè)變量是同樣的道理。

解決：

原因找的了，問題也就好解決了，首先我是在A頁面中調(diào)用的B（）函數(shù)，我只要在A頁面中調(diào)用C（）函數(shù)，那么A、B函數(shù)訪問的變量就是同一變量了，那我怎么才能在A頁面中調(diào)用B（）函數(shù)呢，我要把B頁面當(dāng)中返回值作為參數(shù)傳入B函數(shù)啊，呵呵，其實(shí)方法很簡單了啊，只要這樣就可以了：我在B頁面中寫了這么一句：window.parent.C(str)。

str為我要返回的值，好了我的問題就這么解決了，就好像是我在B實(shí)例中調(diào)用A實(shí)例的方法，然后傳遞參數(shù)一樣，呵呵其實(shí)在C#真的很好理解，但在js中就難了點(diǎn)，其實(shí)我們可以這么理解，一個(gè)js文件就相當(dāng)于一個(gè)類，我們在頁面中引用這個(gè)文件時(shí)就相當(dāng)于實(shí)例化了這個(gè)類，那么一切都好理解了。

我們寫在js文件函數(shù)中的變量當(dāng)然作用域就是這個(gè)函數(shù)，那我們寫在js文件中的變量就相當(dāng)于我們寫在類中的變量，那么它的作用域就是這個(gè)類的實(shí)例。

補(bǔ)充：JavaScript中的坑--全局變量惹得禍

概述

身為一名程序員，因?yàn)閎ug周末加班是必不可少的事情，當(dāng)解決bug的時(shí)候，總有些bug是因?yàn)橐?guī)范導(dǎo)致的，但是這些bug往往不好找，也就是“前人挖坑，后人好踩”。前段時(shí)間，出現(xiàn)了一個(gè)很莫名其妙的bug

就是有個(gè)模塊頁面數(shù)據(jù)不對(duì)。當(dāng)時(shí)找了半天（以為是頁面?zhèn)髦档膯栴}），到最后才發(fā)現(xiàn) 主頁面引用的幾個(gè)js文件中存在一個(gè)相同的全局變量。

對(duì)js中的變量作用域的誤解

很多寫js的都是需要前后臺(tái)一起寫的，我就是后臺(tái)java,前臺(tái)js分模塊一起寫的。在這里，我有一個(gè)誤區(qū)，就是以為js和java中的語法是一樣的。但實(shí)際上還是存在著一些不同的地方。比如js中作用域只是函數(shù)級(jí)別的

1：在{}體內(nèi)定義的局部變量，和在{}體外定義的局部變量實(shí)際上是一個(gè)，并不會(huì)新建

2：在函數(shù)體內(nèi)定義的局部變量，和函數(shù)體外定義的沒什么關(guān)系。

方便記憶的代碼如下：

 <script>
  var test_id = "my love";
  if(true){
   console.log(test_id);
   var test_id = "where my love?";
   console.log(test_id);
  }
  console.log(test_id);
  </script>

顯示結(jié)果：

這就是js中沒有塊級(jí)作用域的證明：很顯然發(fā)現(xiàn)test_id實(shí)際上只有一個(gè)

證明js中變量是函數(shù)級(jí)別的

 <script>
  var test_id = "my love";
  function findLove(){
   var test_id ;
   console.log(test_id);
   test_id = "is you?";
   console.log(test_id);
  }
  findLove();
  console.log(test_id);
  </script>

輸出結(jié)果：

然后我試了一下：在{}體內(nèi)不用var聲明：

<script>
  
 var a = "heh"
  if(true){
   console.log(a);
  }
  </script>

其實(shí)也是可以的輸出 heh

試一下函數(shù)體內(nèi)部用var ，注意一下：代碼不同之處

<script>
  var a = "heh"
  function findLove(){
   console.log(a);
  }
  findLove();
  </script>

<script>
  var a = "heh"
  function findLove(){
   console.log(a);
   var a
  }
  findLove();
  </script>

第一個(gè)輸出的是 heh ;第二個(gè)輸出的是 undifined,一目了然。這個(gè)地方還有一個(gè)細(xì)節(jié)：就是在函數(shù)體內(nèi)，先定義后打印和先打印和定義，實(shí)際上是一樣。

自我測試一下吧：（猜一下輸出結(jié)果，在驗(yàn)證一下吧）

 <script>
  var a = "heh"
  function findLove(){
   console.log(a);
   function findforyou(){
   var a ="you";
   console.log(a);
   }
   function findother(){
   console.log(a)
   }
   findforyou();
   findother();
  }
  findLove();
  </script>