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常用函数归纳整理
Oct 31 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
js如何实现元素曝光上报
Aug 07 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
微信小程序如何实现在线客服功能
Oct 16 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
计数器详细设计
2006/10/09 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
PHP实现计算器小功能
2020/08/28 PHP
基于JQuery的日期联动实现代码
2011/02/24 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
简介Python中用于处理字符串的center()方法
2015/05/18 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
利用Python获取操作系统信息实例
2016/09/02 Python
python实现文件的备份流程详解
2019/06/18 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
Java面试题汇总
2015/12/06 面试题
不假外出检讨书
2014/01/27 职场文书
体育口号大全
2014/06/18 职场文书
北京英语导游词
2015/02/12 职场文书
岗位聘任报告
2015/03/02 职场文书
李强为自己工作观后感
2015/06/11 职场文书
同事去世追悼词
2015/06/23 职场文书
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL