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写的点击上下滚动的小例子
Aug 27 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
详解如何在vue-cli中使用vuex
Aug 07 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
javascript利用键盘控制小方块的移动
Apr 20 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 Javascript
electron踩坑之remote of undefined的解决
Oct 06 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 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之第一天
2006/10/09 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
python实现查找所有程序的安装信息
2020/02/18 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
女大学生自我鉴定
2013/12/09 职场文书
十佳青年个人事迹材料
2014/01/28 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
学校节水倡议书
2015/04/29 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书