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


Posted in Javascript onAugust 28, 2016

今天公司一个实习小妹子问我两段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 = "Hello";
 function test(){
   alert(a);
   a = "World";
   alert(a);
 }
</script>

我想,好简单呀,不就是全局变量跟局部变量的scope问题吗?我说:"当全局变量跟局部变量重名时,局部变量的scope会覆盖掉全局变量的scope,当离开局部变量的scope后,又重回到全局变量的scope。所以两段代码运行的结果分别为:1) undefined World 2) Hello World。然后我随意编了如下一个例子给她:

<script>
  var a =1;
  function test(){
    alert(a);
    var a = 2;
    alert(a);
  }
  test();
  alert(a);
 </script>

大家猜结果等于多少?是输出1 2 1 吗?嗯嗯,当我把测试case发给她之前也是这么认为的,但测试输出后……运行结果是 undefined 2 1。当时百思不得其解,问了谷老师才知道,我对JS还不是非常了解,所以痛下苦功,学习+测试,总结如下:

一、Javascript的变量的scope是根据方法块来划分的(也就是说以function的一对大括号{ }来划分)。切记,是function块,而for、while、if块并不是作用域的划分标准,可以看看以下几个例子:

<script>
function test2(){
  alert ("before for scope:"+i);  // i未赋值(并不是未声明!使用未声明的变量或函数全抛出致命错误而中断脚本执行)

                          // 此时i的值是underfined
  for(var i=0;i<3;i++){
    alert("in for scope:"+i); // i的值是 0、1、2, 当i为3时跳出循环
  }
  alert("after for scope:"+i); // i的值是3,注意,此时已经在for scope以外,但i的值仍然保留为3
  
  while(true){
    var j = 1;
    break;
  }
  alert(j);  // j的值是1,注意,此时已经在while scope以外,但j的值仍然保留为1

  if(true){
    var k = 1;
  }
  alert(k); //k的值是1,注意,此时已经在if scope以外,但k的值仍然保留为1
}

test2();
//若在此时(function scope之外)再输出只存在于test2 这个function scope里的 i、j、k变量会发生神马效果呢?
alert(i); //error! 没错,是error,原因是变量i未声明(并不是未赋值,区分test2函数的第一行输出),导致脚本错误,程序到此结束!
alert("这行打印还会输出吗?"); //未执行
alert(j); //未执行
alert(k); //未执行
</script>

二、Javascript在执行前会对整个脚本文件的声明部分做完整分析(包括局部变量),从而确定实变量的作用域。怎么理解呢?看下面一个例子:

<script>
  var a =1;
  function test(){
    alert(a); //a为undefined! 这个a并不是全局变量,这是因为在function scope里已经声明了(函数体倒数第4行)一个重名的局部变量,
           //所以全局变量a被覆盖了,这说明了Javascript在执行前会对整个脚本文件的定义部分做完整分析,所以在函数test()执行前,
           //函数体中的变量a就被指向内部的局部变量.而不是指向外部的全局变量. 但这时a只有声明,还没赋值,所以输出undefined。
    a=4    
    alert(a); //a为4,没悬念了吧? 这里的a还是局部变量哦!
    var a;   //局部变量a在这行声明
    alert(a); //a还是为4,这是因为之前已把4赋给a了
  }
  test();
  alert(a); //a为1,这里并不在function scope内,a的值为全局变量的值
</script>

三,当全局变量跟局部变量重名时,局部变量的scope会覆盖掉全局变量的scope,当离开局部变量的scope后,又重回到全局变量的scope,而当全局变量遇上局部变量时,怎样使用全局变量呢?用window.globalVariableName。

<script>
  var a =1;
  function test(){  
    alert(window.a); //a为1,这里的a是全局变量哦!
    var a=2;   //局部变量a在这行定义
    alert(a); //a为2,这里的a是局部变量哦!
  }
  test();
  alert(a); //a为1,这里并不在function scope内,a的值为全局变量的值
</script>

当然更多的文章可以参考下面的相关文章。

Javascript 相关文章推荐
javascript函数库-集合框架
Apr 27 Javascript
javascript new后的constructor属性
Aug 05 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
js检验密码强度(低中高)附图
Jun 05 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 #Javascript
教你如何在Node.js中使用jQuery
Aug 28 #Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 #Javascript
Node.js 日志处理模块log4js
Aug 28 #Javascript
node.js中 stream使用教程
Aug 28 #Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 #Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 #Javascript
You might like
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
js简易版购物车功能
2017/06/17 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
vue中使用GraphQL的实例代码
2019/11/04 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Python操作MySQL数据库的方法
2018/06/20 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
Delphi笔试题
2016/11/14 面试题
大四学年自我鉴定
2013/11/13 职场文书
中学生期末评语
2014/02/03 职场文书
车队司机自我鉴定
2014/03/02 职场文书
后勤个人工作总结
2015/02/28 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
社区结对共建协议书
2016/03/23 职场文书
我去timi了,一起去timi是什么意思?
2022/04/13 杂记