浅谈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中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
javascript常用的方法整理
Aug 20 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
vuex的module模块用法示例
Nov 12 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
解决Antd Table组件表头不对齐的问题
Oct 27 Javascript
AJAX学习笔记
May 18 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/11 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
JS实现分页导航效果
2020/02/19 Javascript
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
Django的models中on_delete参数详解
2019/07/16 Python
Django实现跨域的2种方法
2019/07/31 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
Python 实现一个计时器
2020/07/28 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
精彩的英文自荐信
2014/01/30 职场文书
马智宇结婚主持词
2014/04/01 职场文书
青年志愿者活动总结
2014/04/26 职场文书
创先争优标语
2014/06/27 职场文书
实习工作表现评语
2014/12/31 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书