JavaScript定义变量和变量优先级问题探讨


Posted in Javascript onOctober 11, 2014

看下面的代码:

if (!("aa" in window)) {  

    alert('oh my god');

    var aa = 1;  

}  

alert("aa" in window);

alert(aa);

回答以下问题:

会报错吗?会弹出几次?
第2个alert是true还是false?
第3个alert弹出什么?
为什么?
思考下,然后测试下,如果你回答正确,那么后面的文章就不用看了。

-----------------------------

在JS里定义变量太简单了,直接一个var ,甚至不用var都可以:

var a = 1;

这里a就是变量名,1就是变量值。唉,这个太基础了。看下面的代码:
var a;

alert(a);

以firebug测试,会弹出undefined,这个是大家很熟悉的一个字符串了,貌似表示变量未定义。但我觉得,我已经var了啊,这就是定义了嘛,只是没有附值而已。

我们来个真正的没有定义的:

alert(a);

没错,就是直接alert一个根本没有出现过的变量,这会如何?

firebug直接报错了:a is not defined.意思是a没有定义。这个结合前面的代码来看,让人困惑。这个没有定义和前面的未定义有什么不同呢?

其实前面的代码等价于这样的:

var a = undefined;

alert(a);

也就是说,当声明变量而不赋值时,JS会给变量传一个undefined值,注意,这是个“值”,说明a已经有值了,这个值就叫“未定义”。

而后面的直接alert,变量从没有出现过,也就是说这才是真正的未定义。

简单的说:JS中不存在没有值的变量,变量声明的时候就赋值了。

然后我们看下面的代码:

alert(a);

var a = 1;

这个代码会报错吗?因为在alert的时候变量a还没来得及出现呀。

但是这样居然没有报错,而是弹出了undefined值。表明变量a已经存在了,只是值却不是我们想要的,而是undefined。这又是个什么问题呢?

因为var 变量声明和函数声明一样,会提前,其实上面的代码是这样的:

var a;

alert(a);

a = 1;

这么一来就懂了。

所以,这个问题的关键在于:var 声明会提前到作用域顶端,但附值却不会———好纠结的设定,不知道为什么要这么搞。个人觉得这是JS的一个缺陷。

现在有一种代码习惯,主张把变量声明一律放在作用域前方,大概就是考虑到这个——反正就算你不写在前方,JS也会提前到前方。

现在放出文首问题的答案:

只会弹出两个alert,而if里面的alert不会执行,因为var声明的提前性,导致真正的代码是这个样子:

var aa;

if (!("aa" in window)) {  

    alert('oh my god');

    aa = 1;  

}  

alert("aa" in window);

alert(aa);

虽然aa为空,但用'aa' in window判断时会为真,因为a确实存在了,而值是undefined。所以if代码不会执行。后面两个alert我就不说了。

个人感觉这是一个很无厘头的问题,我们应该了解他的原因,但鄙视他这种陷阱。

上面这个问题也是我写这篇文章的缘由,这段代码是我从一篇网文里看到的,但他里面没有答案,我百撕不得骑姐,跑到stackoverflow上去问了才搞清楚。答案就是这篇文章。

但这是很基础的问题啊其实!!!

哈哈,原谅我,后面还有一个问题:

var b = {}

alert(b.aa);

alert(b.aa.bb);

这也是一种声明变量的方式,那么,这段代码会报错吗?为什么?
Javascript 相关文章推荐
新老版本juqery获取radio对象的方法
Mar 01 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
微信小程序实现圆形进度条动画
Nov 18 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
JS forEach跳出循环2种实现方法
Jun 24 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 #Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 #Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 #Javascript
探讨js字符串数组拼接的性能问题
Oct 11 #Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 #Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 #Javascript
js点击button按钮跳转到另一个新页面
Oct 10 #Javascript
You might like
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
prototype class详解
2006/09/07 Javascript
使javascript也能包含文件
2006/10/26 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
2019/08/16 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
python虚拟环境virtualenv的使用教程
2017/10/20 Python
python 除法保留两位小数点的方法
2018/07/16 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
Python如何使用input函数获取输入
2020/08/06 Python
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
大学班长的职责
2014/01/27 职场文书
三个儿子教学反思
2014/02/03 职场文书
学校花圃的标语
2014/06/18 职场文书
规范化管理年活动总结
2014/08/29 职场文书
主持人大赛开场白
2015/05/29 职场文书
初三语文教学反思
2016/03/03 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS