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 相关文章推荐
用js实现计算加载页面所用的时间
Apr 02 Javascript
javascript getElementsByTagName
Jan 31 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 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截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
php自动获取目录下的模板的代码
2010/08/08 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
php Session无效分析资料整理
2016/11/29 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
Python实现的字典值比较功能示例
2018/01/08 Python
对python Tkinter Text的用法详解
2018/10/11 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
python判断无向图环是否存在的示例
2019/11/22 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
2014年电厂工作总结
2014/12/04 职场文书
督导岗位职责
2015/02/04 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
Python中第三方库Faker的使用详解
2022/04/02 Python