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中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
Javascript闭包实例详解
Nov 29 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
php提示undefined index的几种解决方法
2012/05/21 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
php中chdir()函数用法实例
2014/11/13 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
jquery select下拉框操作的一些说明
2010/04/02 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
在Django的模型中添加自定义方法的示例
2015/07/21 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
如何在python中使用selenium的示例
2017/12/26 Python
Python3解释器知识点总结
2019/02/19 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
办公室文秘自我评价
2013/09/21 职场文书
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
委托书范文
2014/04/02 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书