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 相关文章推荐
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
vue自定义一个v-model的实现代码
Jun 21 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 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 扩展Memcached命令用法实例总结
2020/06/04 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python list转dict示例分享
2014/01/28 Python
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
python中删除某个元素的方法解析
2019/11/05 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
如何让python的运行速度得到提升
2020/07/08 Python
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
乔迁宴答谢词
2014/01/21 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
写自荐信的注意事项
2014/03/09 职场文书
获奖感言范文
2015/07/31 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
python套接字socket通信
2022/04/01 Python
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js