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 相关文章推荐
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
Ionic快速安装教程
Jun 03 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
微信小程序设置滚动条过程详解
Jul 25 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
详解JWT token心得与使用实例
Aug 02 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
memcache命令启动参数中文解释
2014/01/13 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
PHP培训要多少钱
2017/06/06 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
js查错流程归纳
2012/05/04 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
uni-app如何实现增量更新功能
2020/01/03 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
棉花姑娘教学反思
2014/02/15 职场文书
关爱留守儿童标语
2014/06/18 职场文书
内科护士节演讲稿
2014/09/11 职场文书
家长评语怎么写
2014/12/30 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
公司酒会致辞
2015/07/30 职场文书
合同补充协议书
2016/03/24 职场文书
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis