js里面的变量范围分享


Posted in Javascript onJuly 18, 2020

先上两段代码

<script>
var i = 2;
function test(){
	var i = 1;
}
test();
alert(i);//值为2
</script>
<script>
var i = 2;
function test(){
	i = 1;
}
test();
alert(i);//值为1
</script>

是不是觉得很奇怪,我当时也是这样搞晕了,代码没问题啊,咋回事,最后找了找,原来是var作怪。我自己的理解是,var是用来申明变量的,在方法体里面申明的就是局部变量,局部变量自然不会影响到全局变量的值了。所以第一段代码alert出来的是2;第二段由于没有用var关键词申明,所以默认用的是全局的i的值,在全局里面改变全局变量的值,所以全局变量i的值被修改成1了。

下面再多看几个demo

<script>
/*这个很简单,就是改变全局的值*/
var i = 2;
function test(){
	alert(i);//弹框2
	i = 1;
	alert(i);//弹框1
}
test();
alert(i);//弹框1
</script>
<script>
/*这里就有点奇怪了,为啥第一个alert弹框是undefine呢?*/
var i = 2;
function test(){
	alert(i);//弹框undefined,查了下,这个i不是全局变量,因为在function scope里已经声明了,var i = 1;所以全局的i被覆盖了,这说明了js在执行前会对整个脚本文件的定义部分做完整分析,所以在test()函数执行前,函数体中的变量i都已经被指向了内部的局部变量,而不是指向外部的全局变量,但这是i还没有申明和赋值,所以弹的是undefined。(从刀刀的专栏(http://blog.csdn.net/zyz511919766/article/details/7276089)得知)
	var i = 1;
	alert(i);//弹框1 这里已经赋值了1,然后在函数体里面,所以弹值是1
}
test();
alert(i);//弹框2 因为局部变量不会影响全局变量,所以这里弹的值是2
</script>
<script>
var i =1;
function test(){
	alert(i);//undefined 这个上一段代码已经说了,js会先做解析,只要有var,就会只想局部变量,但是这个时候同样还没定义和赋值,所以undefined
	i=2;
	alert(i)//2 已经赋值了,所以是2
	var i;
	alert(i);//2 这里还是2.因为在前面已经把2赋值给i了
}
test();
alert(i);//1 弹全局的值,毫无疑问
</script>
<script>
/**如果我们方法体里面变量名是一样,但是我又要用到全局的变量怎么办呢**/
var i =1;
function test(){
	var i = 2;
	alert(i);//这里是2,不解释
	alert(window.i);//这里是1 因为用window.globalVariableName方式可以访问到全局的i
}
test();
alert(i);//这里是1,不解释
</script>

解释性文字都写在代码里面,大家搞不懂,可以运行下,就到这了

Javascript 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
javascript 冒号 使用说明
Jun 06 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 #Javascript
深入理解 ES6中的 Reflect用法
Jul 18 #Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 #Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 #Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 #Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 #Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 #Javascript
You might like
php 上传功能实例代码
2010/04/13 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
自动更新作用
2006/10/08 Javascript
jQuery 注意事项 与原因分析
2009/04/24 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
python私有属性和方法实例分析
2015/01/15 Python
Python实现去除代码前行号的方法
2015/03/10 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
程序员经常用到的UNIX命令
2015/04/13 面试题
妇科医生自荐信
2013/11/05 职场文书
股份合作协议书
2014/04/12 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
科学发展观标语
2014/10/08 职场文书
荆州古城导游词
2015/02/06 职场文书
现场施工员岗位职责
2015/04/11 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
Mysql基础知识点汇总
2021/05/26 MySQL
logback 实现给变量指定默认值
2021/08/30 Java/Android