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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
extjs 04_grid 单击事件新发现
Nov 27 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
JS继承用法实例分析
Feb 05 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
React Fragment介绍与使用详解
Nov 11 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
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
Laravel框架表单验证详解
2014/09/04 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
初识Node.js
2014/09/03 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
Python语言描述KNN算法与Kd树
2017/12/13 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
详解python调用cmd命令三种方法
2019/07/08 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
师范应届生教师求职信
2013/11/05 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
总经理司机岗位职责
2015/04/10 职场文书
教师教育教学随笔
2015/08/15 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
python实现手机推送 代码也就10行左右
2022/04/12 Python
我去timi了,一起去timi是什么意思?
2022/04/13 杂记