浅谈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 相关文章推荐
用js生产批量批处理执行命令
Jul 28 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
js给selected添加options的方法
May 06 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
JS删除数组指定值常用方法详解
Jun 04 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/01/27 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
python实现图片变亮或者变暗的方法
2015/06/01 Python
python结合API实现即时天气信息
2016/01/19 Python
python如何在终端里面显示一张图片
2016/08/17 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
生产经理的自我评价分享
2013/11/07 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
质量负责人任命书
2014/06/06 职场文书
道德与公民自我评价
2015/03/09 职场文书
投标单位介绍信
2015/05/05 职场文书
实习单位意见
2015/06/04 职场文书
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库