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中通过URL传递汉字的方法
Apr 09 Javascript
javascript+xml技术实现分页浏览
Jul 27 Javascript
JavaScript 学习笔记(六)
Dec 31 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 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
thinkphp缓存技术详解
2014/12/09 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
react redux入门示例
2018/04/19 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
跟老齐学Python之关于类的初步认识
2014/10/11 Python
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
Python pip使用超时问题解决方案
2020/08/03 Python
我们是伦敦女孩:WalG
2018/01/08 全球购物
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
《口技》教学反思
2014/02/21 职场文书
先进班组事迹材料
2014/12/25 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
班级班风口号大全
2015/12/25 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书