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 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
javascript jQuery $.post $.ajax用法
Jul 09 Javascript
jquery select操作的日期联动实现代码
Dec 06 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
javascript实现留言板功能
Feb 08 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 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对象和数组相互转换的方法
2015/05/12 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
javascript import css实例代码
2008/07/18 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
简单了解python协程的相关知识
2019/08/31 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
人力资源专业推荐信
2013/11/29 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
管理人员岗位职责
2015/02/14 职场文书
应聘教师自荐信
2015/03/26 职场文书
商务司机岗位职责
2015/04/10 职场文书
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python