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 Study Notes学习笔记 (二)
Aug 04 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 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
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
php调用shell的方法
2014/11/05 PHP
php常用的url处理函数总结
2014/11/19 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
python编程使用协程并发的优缺点
2018/09/20 Python
便捷提取python导入包的属性方法
2018/10/15 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
食品业务员岗位职责
2014/03/18 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
python某漫画app逆向
2021/03/31 Python
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python