JS全局变量和局部变量
大家好,又见面了,我是你们的朋友全栈君。
全局变量和局部变量
在看了一个博主写的关于js全局变量的的介绍后,自己也跟着做了一下,并且记录在这里。 原博客地址:谈谈JS的全局变量跟局部变量。 博主说的比较详细,也比我的表达好。不过我的内容多了点东西,关于定义变量时不加var的影响,在文章的最后面。
先上一段代码:
<script type="text/javascript">
var a =1;
function test(){
alert(a);
a=4;
alert(a);
var a;
alert(a);
}
test();
alert(a);
</script>
在网页里输出结果为:undefined > 4 > 4 > 1
原因是: 全局变量a在外部被定义,可以在全局被使用,所以最后alert(a)显示的是1。而在方法内重新var a;相当于重新定义了一个局部变量a,会在这个方法内把全局变量的作用域掩盖,而js在执行之前的扫描检测机制会使得function内部的全局变量作用能力提前失效。这段代码就相当于:
<script type="text/javascript">
var a =1;
function test(){
var a; //相当于声明被提前了
alert(a);
a=4;
alert(a);
alert(a);
}
test();
alert(a);
</script>
再看:
<script type="text/javascript">
var a =1;
function test(){
var a = 2;
alert(window.a);
alert(a);
}
test();
alert(a);
</script>
输出结果为:1 > 2 > 1 和java的继承有点相似,function相当于子类,会遮盖父类信息,但是如果使用super.属性依旧会看得到父类信息,这里window就像是父类。
不一样的是: java在for,if,while内定义的变量不会在他们的范围外保留,但是:
<script type="text/javascript">
for(var i=0;i<2;i++){
alert(i);
}
alert(i)
</script>
输出结果是:0 > 1 > 2 在for循环外部,i也被保留改动了,而i是在for循环内被定义的。while和if同样如此。
还有,在定义变量时不加var
定义变量不加var,相当于在定义全局变量
<script type="text/javascript">
i = 2;
function test(){
n = 2;
i = 3;
alert(n);
alert(i);
}
test()
alert(n)
alert(i)
</script>
输出结果为:2 > 3 > 2 > 3 n在function内部被定义成全局变量,所以在外部也能被访问到 但是如果在定义n时前面加上var
<script type="text/javascript">
i = 2;
function test(){
var n = 2; //加上了var
i = 3;
alert(n);
alert(i);
}
test()
alert(n)
alert(i)
</script>
结果为:2 > 3 没了!最后的alert(i)被强制中断了。在控制台可以看到出现了错误:
说n没有被定义,因为在内部加上了var,就相当于在当前域定义变量,而当前域是function
那么你再猜一猜下面的结果是什么?:
<script type="text/javascript">
i = 2;
function test(){
alert(i);
i = 3;
alert(i);
}
test()
alert(i)
</script>
输出结果为:2 > 3 > 3 因为在内部并没有重新定义i,而唯一改变的i = 3;是在检测到i在外部定义后作出的改变,所以i不会被覆盖作用域,test()里第一个alert能够看到外部i的值。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/140963.html原文链接:https://javaforall.cn
相关文章
- js实现 chunk 函数分组数组
- 有效避免JS全局变量污染
- js统一全局变量
- 【说站】js构造函数模式是什么
- JS对象转数组_js怎么把数组转成对象
- JS常见加密 AES、DES、RSA、MD5、SHAI、HMAC、Base64(编码) - Python/JS实现
- js 数组去除重复数据-5 个提升你 JS 编码水平的实例
- HTML CSS3+JS实现【灵动岛】效果
- 设计模式之命令模式-JS
- 原生 JS 实现 HTML 转 Markdown ,html2md.js
- JS条件运算符(?:)和new运算符
- 快速掌握JS操作MySQL数据库技巧(js操作mysql数据库)
- 使用JS操作Oracle数据库探索潜在可能性(js和oracle数据库)
- js通用滑动门类
- 一段批量给页面上的控件赋值js
- CSS和JS标签style属性对照表(方便js开发的朋友)
- Javascript绝句欣赏一些经典的js代码
- 一个日期下拉菜单的js实现代码
- JS中prototype关键字的功能介绍及使用示例
- js使用数组判断提交数据是否存在相同数据
- js基本ajax写法示例代码
- JavaScript学习笔记之JS事件对象