探讨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 相关文章推荐
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
javascript中函数作为参数调用的方法
Feb 09 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
Move.js入门
Feb 08 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
微信小程序如何实现在线客服功能
Oct 16 Javascript
Vuex的实战使用详解
Oct 31 Javascript
vue - props 声明数组和对象操作
Jul 30 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
数据库的日期格式转换
2006/10/09 PHP
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
jquery map方法使用示例
2014/04/23 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
Python中一般处理中文的几种方法
2019/03/06 Python
Python文件路径名的操作方法
2019/10/30 Python
python连接PostgreSQL过程解析
2020/02/09 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
研究生自我鉴定范文
2013/10/30 职场文书
电焊工岗位职责
2014/03/06 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
MYSQL 运算符总结
2021/11/11 MySQL
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电