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中的几个运算符
Jun 29 Javascript
Javascript 作用域使用说明
Aug 13 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 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
phpMyAdmin 安装及问题总结
2009/05/28 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python使用xmlrpc实例讲解
2013/12/17 Python
安装dbus-python的简要教程
2015/05/05 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
python 回溯法模板详解
2020/02/26 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
普天C++笔试题
2016/03/20 面试题
个人房屋买卖协议书(范本)
2014/10/04 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
电影圆明园观后感
2015/06/03 职场文书
员工手册董事长致辞
2015/07/29 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
《鲸》教学反思
2016/02/23 职场文书
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server