浅谈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内核之基本概念
Oct 21 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
详解如何较好的使用js
Dec 16 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
Jquery获取radio选中的值
May 05 jQuery
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
TypeScript开发Node.js程序的方法
Apr 30 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
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注释实例技巧
2008/10/03 PHP
基于header的一些常用指令详解
2013/06/06 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
隐性调用php程序的方法
2015/06/13 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
理解 JavaScript EventEmitter
2018/03/29 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
采购部部门职责
2013/12/15 职场文书
给朋友的道歉信
2014/01/09 职场文书
学生犯错保证书
2015/05/09 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫