解决javascript 全局变量失效的问题

问题：

我在js文件中定义了一个全局变量：var a，在函数B()中给a赋值，然后在函数C（）中访问a结果发现a居然是undefined

找原因：

查了不少资料感觉和我的情况都不同，仔细分析了一下，发现了一些端倪：我的操作是这样的，我在A页面中加了iframe，iframe的地址是B，我在A页面中调用了B（）函数，然后又在B页面中调用了C（）函数。问题就出在这了，javascript的全局变量的作用范围实际上是只在当前页面起作用（仔细想一下也应是这样，要不然岂不是要乱套了），从这个意义上讲javascript的全局变量也谈不上是全局变量，它只在当前页面中起作用，我们要是把当前页面看做一个类的话，那我们就完全可以把这中全局变量看做为private的。

至此，问题原因就很简单了，我在A页面中访问的a变量和我在B页面中访问的a变量中访问的a变来那个并不是同一个变量，就好像是一个类里面的private变量，我在A实例中访问的和我在B实例中访问的并不是同一个变量是同样的道理。

解决：

原因找的了，问题也就好解决了，首先我是在A页面中调用的B（）函数，我只要在A页面中调用C（）函数，那么A、B函数访问的变量就是同一变量了，那我怎么才能在A页面中调用B（）函数呢，我要把B页面当中返回值作为参数传入B函数啊，呵呵，其实方法很简单了啊，只要这样就可以了：我在B页面中写了这么一句：window.parent.C(str)。

str为我要返回的值，好了我的问题就这么解决了，就好像是我在B实例中调用A实例的方法，然后传递参数一样，呵呵其实在C#真的很好理解，但在js中就难了点，其实我们可以这么理解，一个js文件就相当于一个类，我们在页面中引用这个文件时就相当于实例化了这个类，那么一切都好理解了。

我们写在js文件函数中的变量当然作用域就是这个函数，那我们写在js文件中的变量就相当于我们写在类中的变量，那么它的作用域就是这个类的实例。

补充：JavaScript中的坑--全局变量惹得祸

概述

身为一名程序员，因为bug周末加班是必不可少的事情，当解决bug的时候，总有些bug是因为规范导致的，但是这些bug往往不好找，也就是“前人挖坑，后人好踩”。前段时间，出现了一个很莫名其妙的bug

就是有个模块页面数据不对。当时找了半天（以为是页面传值的问题），到最后才发现 主页面引用的几个js文件中存在一个相同的全局变量。

对js中的变量作用域的误解

很多写js的都是需要前后台一起写的，我就是后台java,前台js分模块一起写的。在这里，我有一个误区，就是以为js和java中的语法是一样的。但实际上还是存在着一些不同的地方。比如js中作用域只是函数级别的

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>

显示结果：

这就是js中没有块级作用域的证明： 很显然发现test_id实际上只有一个

证明js中变量是函数级别的

 <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 ;第二个输出的是 undifined,一目了然。这个地方 还有一个细节：就是在函数体内，先定义后打印和先打印和定义，实际上是一样。

自我测试一下吧：（猜一下输出结果，在验证一下吧）

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

二：函数闭包

因为js中变量的作用域是函数级的，所以用闭包来解决一些传值问题（比如递归）。篇幅太长了，这次不介绍了。

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

赞 (0)

相关推荐

  • JavaScript防止全局变量污染的方法总结

    本文实例讲述了JavaScript防止全局变量污染的方法.分享给大家供大家参考,具体如下: javaScript 可以随意定义保存所有应用资源的全局变量.但全局变量可以削弱程序灵活性,增大了模块之间的耦合性. 在多人协作时,如果定义过多的全局变量 有可能造成全局变量冲突,也就是全局变量污染问题,以下是两种解决办法 一. 定义全局变量命名空间 只创建一个全局变量,并定义该变量为当前应用容器,把其他全局变量追加在该命名空间下 var MY={}; my.name={ big_name:"zhangs

  • AngularJS基于provider实现全局变量的读取和赋值方法

    本文实例讲述了AngularJS基于provider实现全局变量的读取和赋值方法.分享给大家供大家参考,具体如下: 简单全局变量的设置 1,通过var 直接定义global variable,这根纯js是一样的. 2,用angularjs value来设置全局变量 . 3,用angularjs constant来设置全局变量 . 示例代码如下: 在app文件中,声明三种变量 'use strict'; /* App Module */ var test2 = 'tank'; //方法1,定义全局

  • javascript 显示全局变量与隐式全局变量的区别

    在JavaScript中,全局变量有两种声明方式 使用 var 显示声明的全局变量 不使用 var 声明的隐式全局变量 两者的区别在于是否能通过 delete 操作符删除 先看一段代码 var a = 'a'; // 显式声明的全局变量 b = 'b'; // 隐式声明的全局变量 console.log(a); // a console.log(b); // b console.log(window.a); // a console.log(window.b); // b 在 js 中全局变量其

  • 浅析JavaScript预编译和暗示全局变量

    1. 暗示全局变量 未声明的变量称为暗示全局变量. var a = 1; //函数体外声明的变量称为全局变量 b = 2; // 无论函数体外或函数体内未声明的变量都称为暗示全局变量 function fn() { var c = 3; //函数体内声明的变量称为局部变量 d = 4; // 暗示全局变量 } fn(); // 若不执行函数,则不会进行函数预编译,d 就不会提升为全局变量 console.log(c); // error: c is not defined console.log

  • Javascript学习之谈谈JS的全局变量跟局部变量(推荐)

    今天公司一个实习小妹子问我两段JS代码的区别: 代码一: <script type="text/javascript"> var a = "Hello"; function test(){ var a; alert(a); a = "World"; alert(a); } </script> 代码二: <script type="text/javascript"> var a = "

  • 解决javascript 全局变量失效的问题

    解决javascript 全局变量失效的问题

    问题: 我在js文件中定义了一个全局变量:var a,在函数B()中给a赋值,然后在函数C()中访问a结果发现a居然是undefined 找原因: 查了不少资料感觉和我的情况都不同,仔细分析了一下,发现了一些端倪:我的操作是这样的,我在A页面中加了iframe,iframe的地址是B,我在A页面中调用了B()函数,然后又在B页面中调用了C()函数.问题就出在这了,javascript的全局变量的作用范围实际上是只在当前页面起作用(仔细想一下也应是这样,要不然岂不是要乱套了),从这个意义上讲jav

  • 使用微信内嵌H5网页解决JS倒计时失效问题

    使用微信内嵌H5网页解决JS倒计时失效问题

    项目要求:将H5商城页面嵌套到公司微信公众号里 项目本身的开发跟移动端网页并无太多差异,只是这昨天遇到一个问题,说是棘手,到也简单. 用户下单后,在选择支付方式页面,有个倒计时的逻辑(从下单时开始计算,24小时后未支付,会有ws自动取消这个订单),js代码如下: <script type="text/javascript"><br> var timespan = '20160113'; //后台程序生成24小时时间差值,这里随便写写 var timer; fun

  • 轻松解决JavaScript定时器越走越快的问题

    解决JavaScript定时器越走越快的问题 之前在项目中写了定时器来做循环播放,但是总是会有越走越快的问题,开始是以为前后的HTML代码拼接的有问题,时间紧急的情况下反复改了很多也没什么效果,后来发现是js定时器的问题,在这里记录一下. (setinterval)多次初始化 使用js定时器(setinterval)首要的问题就是要记得清除,即调用(clearInterval)方法,由于没有使用定时器的经验,我一开始是没有清除定时器,程序每一次初始化的时候都调用一次定时器,之前的定时器实例没有被

  • 解决C++全局变量只能初始化不能赋值的问题

    C++中,全局变量只能声明.初始化,而不能赋值 也就是说,下面这样是不被允许的: #include <cstdio> using namespace std; int a; a = 2; int main() { return 0; } 错误提示是: C++ requires a type specifier for all declarations 声明.初始化与赋值的区别: 声明:int a; 初始化:int a = 2;(在声明的时候顺带赋值叫做初始化) 赋值:a = 2; 只有定义(i

  • 解决JavaScript layui 下拉框不显示的问题

    初学layui时会遇到 layui的下拉框总是显示不出来 代码没问题但是 页面就是不显示下拉框 复制下面js代码 layui.use('form', function(){ var form = layui.form; form.render(); }); 以上这篇解决JavaScript layui 下拉框不显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 解决JavaScript中0.1+0.2不等于0.3问题

    console.log(0.1+0.2===0.3)// true or false?? 在正常的数学逻辑思维中,0.1+0.2=0.3这个逻辑是正确的,但是在JavaScript中0.1+0.2!==0.3,这是为什么呢?这个问题也会偶尔被用来当做面试题来考查面试者对JavaScript的数值的理解程度. 在JavaScript中的二进制的浮点数0.1和0.2并不是十分精确,在他们相加的结果并非正好等于0.3,而是一个比较接近的数字 0.30000000000000004 ,所以条件判断结果为

  • 解决laravel session失效的问题

    最新在学习laravel,用到了session,因为laravel没法用$_SESSION 所以只能用框架的session. 贴上代码 <?php namespace App\Http\Controllers; use App\Http\Requests; use Request; use Illuminate\Support\Facades\Session; class CommonController extends Controller { static function login(){

  • idea配置springboot热部署终极解决办法(解决热部署失效问题)

    idea配置springboot热部署终极解决办法,解决热部署失效问题 1. 添加maven依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <version>2.2.5.RELEASE</version> <optional>true</opt

  • 解决mybatisplus MetaObjectHandler 失效的问题

    目录 一.什么是metaObjectHandler 二.失效场景及解决方案 一.什么是metaObjectHandler MetaObjectHandler接口是mybatisPlus为我们提供的的一个扩展接口,我们可以利用这个接口在我们插入或者更新数据的时候,为一些字段指定默认值使用方式如下: 1.在实体类上加入@TableField注解 @Getter @Setter public class AbstractBaseDO<T extends Model<T>> extends

  • 解决javascript:window.close()在chrome,Firefox下失效的问题

    解决javascript:window.close()在chrome,Firefox下失效的问题

    window.close(),一看就知道是用来关闭浏览器窗口的方法.W3CSchool对该方法的解释如下:方法 close() 将关闭有 window 指定的顶层浏览器窗口.某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身.只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭.这阻止了恶意的脚本终止用户的浏览器. 在IE中,window.close()能生效,在生效的时候,会弹出提示框,询问你是否关闭该窗口,如图: 点击"是

随机推荐