JavaScript全局变量失效与iframe跨页面通信及作用域详解

问题现象：

在JS文件中声明了一个全局变量var a，并在函数B()中对其进行赋值。随后在函数C()中尝试访问该变量，却发现a的值为undefined。

原因排查：

经查阅资料发现常见案例与当前情况不符，经过仔细分析，发现关键操作链路如下：在A页面中嵌入了一个指向B页面的iframe。在A页面中调用了B页面中的函数B()，紧接着在B页面内部调用了函数C()。问题的根源在于：JavaScript的全局变量作用域实际上仅限于当前页面上下文。若将每个页面视为一个独立的类实例，那么所谓的“全局变量”实际上相当于该实例中的私有变量（private）。

因此，问题原因变得清晰：在A页面中访问的变量a，与在B页面中访问的变量a，并非同一个变量。这类似于在不同类的实例中访问各自的私有变量，二者互不干扰。

解决方案：

既然明确了原因，解决思路便很直接。由于是在A页面中触发了B()函数的调用，只需在A页面中直接调用C()函数，即可确保A和B页面访问的是同一变量上下文。具体实现方式是：在B页面中，通过window.parent.C(str)的方式调用A页面中的函数C，并将需要返回的值str作为参数传入。

这里，str代表需要传递的返回值。这种机制类似于在B实例中调用A实例的方法并传递参数。虽然C#等面向对象语言中这种跨实例调用很直观，但在JavaScript中需要特别注意上下文隔离。可以将JS文件理解为一个类，在页面中引用该文件即相当于实例化了这个类，这样理解便顺理成章。

写在JS文件函数内部的变量，其作用域自然限定在该函数内；而写在JS文件顶层（非函数内）的变量，其作用域则限定在该文件所对应的页面实例中。

补充阅读：JavaScript中的坑——全局变量引发的故障

概述

作为程序员，因Bug导致的周末加班是常态。许多Bug源于编码规范缺失，这类问题往往隐蔽难查，可谓“前人挖坑，后人踩”。近期遇到一个看似莫名其妙的Bug：

某个模块页面数据显示异常。经过长时间排查（起初误以为是页面传值问题），最终发现原因是主页面引用的多个JS文件中存在同名全局变量，导致冲突。

对JavaScript变量作用域的常见误解

许多前端开发者同时具备后端Java开发背景，容易误以为JS与Java语法完全一致。实际上，两者存在显著差异，例如JavaScript中的作用域仅为函数级别，而非块级别。

1. 在{}代码块内部定义的局部变量，与在{}外部定义的局部变量，实际上是同一个变量，并不会因为代码块而新建作用域。

2. 在函数内部定义的局部变量，与函数外部的变量没有任何关联。

便于记忆的代码示例如下：

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

运行结果：

上述现象证明了JavaScript中没有块级作用域：很明显，test_id变量在整个作用域内仅存在一个。

验证JavaScript中变量为函数级作用域

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

再测试函数体内部使用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，第二个输出undefined，一目了然。此外还有一个细节：在函数体内，先定义后打印与先打印后定义，效果实际上是一致的（涉及变量声明提升机制）。

自我测试：（先猜测输出结果，再验证）

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

二、函数闭包

由于JavaScript中变量的作用域是函数级别的，因此可以利用闭包来解决一些传值问题（例如递归场景）。由于篇幅限制，此处不再展开介绍。

以上为个人经验总结，希望能给大家一个参考，也希望大家多多支持本站。如有错误或未考虑完全的地方，望不吝赐教。