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 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 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
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
javascript中AJAX用法实例分析
2015/01/30 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
浅谈 vue 中的 watcher
2017/12/04 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
利用python实现数据分析
2017/01/11 Python
Python+Wordpress制作小说站
2017/04/14 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
Python和Go语言的区别总结
2019/02/20 Python
Python3 读取Word文件方式
2020/02/13 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
学生手册家长评语
2014/02/10 职场文书
超市周年庆活动方案
2014/08/16 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python