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

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

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

問題：

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

找原因：

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

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

解決：

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

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

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

補充：JavaScript中的坑--全局變量惹得禍

概述

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

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

對js中的變量作用域的誤解

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

1：在{}體內定義的局部變量，和在{}體外定義的局部變量實際上是一個，并不會新建

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

方便記憶的代碼如下：

 <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>

顯示結果：

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

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

 <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>

輸出結果：

然后我試了一下：在{}體內不用var聲明：

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

其實也是可以的輸出 heh

試一下函數(shù)體內部用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>

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

自我測試一下吧：（猜一下輸出結果，在驗證一下吧）

 <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>