浅谈JavaScript的全局变量与局部变量


Posted in Javascript onJune 10, 2016

一、JavaScript scope 的划分标准是function函数块,不是以 if、while、for来划分的

<script>
function f1(){
   alert("before for scope:"+i);    
 //i未赋值(并不是没有声明!使用未声明变量或函数会导致致命错误从而中断脚本执行)
 //此时i值为undefined
   for(var i=0; i<3;i++){
       alert("in for scope:"+i);}
 //i的值是0,1,2  
   alert(“after for scope:”+1);
  //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
}
f1();
//此时在函数块外调用函数,再次输出存在于f1这个function scope里的i j k变量
alert(i);
//error!!!原因是这里的i未声明(不是未赋值,区别f1的第一行输出),脚本错误,程序结束!
alert(j);    
//未执行
alert(k);
//未执行
</script>

二、JavaScript在执行之前会对整个脚本文件进行预编译(对脚本文件的声明部分做分析,包括局部变量部分),从而确定实变量的作用域。举个例子在下边:

<script>
   var x=1;
   function f2(){
    alert(x);
   //x的值为undefined!这个x并不是全局变量,因为在function scope已经又声明了一个重名的局部变量,所以全局变量的参数a被覆盖了。
    说明了JavaScript在执行前会进行预编译,函数体内的x就被指向局部变量,而不是全局变量。此时x只有声明,没有赋值,所以为undefined
    x=3;
    alert(x);
   //x值为3.但还是局部变量
    var x;
   //局部变量x在这里声明
    alert(x);
   //值为3
   }
   f2();
   alert(x);
   //x值为1,并不是在function scope内,x的值为全局变量的值。
</script>

三、当全局变量跟局部变量重名时,局部变量的scope会覆盖掉全局变量的scope,当离开局部变量的scope后,又重回到全局变量的scope,而当全局变量遇上局部变量时,

怎样使用全局变量呢?用window.globalVariableName。

<script>
   var a=1;
    function f3(){
       alert(window.a);
  //a位1,这里的a是全局变量
       var a=2;
        alert(a);
      }
    f3();
    alert(a);
</script>

以上这篇浅谈JavaScript的全局变量与局部变量就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 无符号右移赋值操作
Apr 17 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
js时间控件只显示年月
Jan 08 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 Javascript
用VsCode编辑TypeScript的实现方法
May 07 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 Javascript
javaScript知识点总结(必看篇)
Jun 10 #Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 #Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 #Javascript
老生常谈JavaScript数组的用法
Jun 10 #Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 #Javascript
jQuery学习心得总结(必看篇)
Jun 10 #Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 #Javascript
You might like
PHP的变量类型和作用域详解
2014/03/12 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
简单谈谈json跨域
2016/03/13 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
Python numpy 常用函数总结
2017/12/07 Python
Python多图片合并PDF的方法
2019/01/03 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
装潢设计实习自我鉴定
2013/09/19 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
社区务虚会发言材料
2014/10/20 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
Log4j.properties配置及其使用
2021/08/02 Java/Android