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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 Javascript
js实现百度登录窗口拖拽效果
Mar 19 Javascript
js正则表达式简单校验方法
Jan 03 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开发中常用的字符串操作函数
2011/02/08 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python学习入门之区块链详解
2017/07/25 Python
python 识别图片中的文字信息方法
2018/05/10 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
Python2与Python3的区别实例分析
2019/04/11 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
Django如何实现上传图片功能
2019/08/16 Python
Python Process多进程实现过程
2019/10/22 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
美国女孩服装购物网站:Justice
2017/03/04 全球购物
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
教师节活动主持词
2014/04/02 职场文书
文明班集体申报材料
2014/05/23 职场文书
一份文言文检讨书
2014/09/13 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
公证书格式
2015/01/23 职场文书
督导岗位职责范本
2015/04/10 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
Golang中channel的原理解读(推荐)
2021/10/16 Golang