探讨JavaScript中声明全局变量三种方式的异同


Posted in Javascript onDecember 03, 2013

变量及变量声明是一门语言最基本的概念,初学者都会很快掌握。JavaScript中声明变量也是如此,很简单var(关键字)+变量名(标识符)。

方式1

var test;
var test = 5;需注意的是该句不能包含在function内,否则是局部变量。这是第一种方式声明全局变量。

方式2

test = 5;
没有使用var,直接给标识符test赋值,这样会隐式的声明了全局变量test。即使该语句是在一个function内,当该function被执行后test变成了全局变量。

方式3

window.test;
window.test = 5;这种方式经常被用到一个匿名函数执行后将一些函数公开到全局。 如JQuery1.5中最末一句

window.jQuery = window.$ = jQuery;

如果只是使用变量test,那么三种方式将没有什么区别。比如:alert(test) 都将显示5。但三种方式在某些情况下还是有区别的。分别按以上三种方式声明三个变量a1,a2,a3。

a1 = 11;
var a2 = 22;
window.a3 = 33;

1,for in window

for(a in window){
 if(a=='a1'||a=='a2'||a=='a3'){
  alert(a)
 }
}
IE6/7/8/9:只弹出了a3,说明通过第一,二种方式声明的全局变量通过for in window时将获取不到。
Firefox/Chrome/Safari/Opera :a1,a2,a3都弹出了,说明三种方式声明的全局变量,通过for in window时都能获取到。

2,delete

try {
 alert(delete a1);
}catch(e){alert('无法delete a1')}

try{
 alert(delete a2);
}catch(e){alert('无法delete a2')}

try{
 alert(delete a3);
}catch(e){alert('无法delete a3')}

结果如下

探讨JavaScript中声明全局变量三种方式的异同

可以看到,
1,delete a2所有浏览器都是false。即通过var声明的变量无法删除,所有浏览器表现一致。这在犀牛书上也有提到。

2,通过window.a3方式声明的全局变量在IE6/7/8中均无法删除,IE9/Firefox/Chrome/Safari/Opera中却可以。

虽然有以上两点不同,但当用in运算时,都返回true。

alert('a1' in window);//true
alert('a2' in window);//true
alert('a3' in window);//true
用with打开对象window闭包时,所有浏览器也表现一致,如下

with(window){
 if(a1){
  alert(a1);//11
 }
 if(a2){
  alert(a2);//22
 }
 if(a3){
  alert(a3);//33
 } 
}

Javascript 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
javascript开发中因空格引发的错误
Nov 08 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 #Javascript
解析Javascript小括号“()”的多义性
Dec 03 #Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 #Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 #Javascript
jQuery获得内容和属性方法及示例
Dec 02 #Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 #Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 #Javascript
You might like
PHP常用的排序和查找算法
2015/08/06 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
退休教师欢送会主持词
2014/03/31 职场文书
爱情寄语大全
2014/04/09 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
大班上学期个人总结
2015/02/13 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB