探讨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 相关文章推荐
js直接编辑当前cookie的脚本
Sep 14 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
深入浅出vue图片路径的实现
Sep 04 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编程与应用
2006/10/09 PHP
php下保存远程图片到本地的办法
2010/08/08 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
深入理解Vue 组件之间传值
2018/08/16 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
python实现批量改文件名称的方法
2015/05/25 Python
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
python怎么判断模块安装完成
2020/06/19 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
英国香水店:The Perfume Shop
2017/03/27 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
安全生产网格化管理实施方案
2014/03/01 职场文书
教师业务培训方案
2014/05/01 职场文书
项目合作意向书模板
2014/07/29 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
Elasticsearch 聚合查询和排序
2022/04/19 Python