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 相关文章推荐
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
纯js实现手风琴效果
Apr 17 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
JS异步函数队列功能实例分析
Nov 28 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
使用FormData实现上传多个文件
Dec 04 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
利用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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
jQuery 自定义函数写法分享
2012/03/30 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
vue生命周期实例小结
2018/08/15 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
Python对切片命名的实现方法
2018/10/16 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Series和DataFrame使用简单入门
2019/11/13 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
大学生实习自我鉴定
2013/12/11 职场文书
洗发水广告词
2014/03/13 职场文书
活动总结怎么写
2014/04/28 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
离职信范文
2015/06/23 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书