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 cookies 设置、读取、删除实例代码
Apr 12 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 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下过滤HTML代码的函数
2007/12/10 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
开源Web应用框架Django图文教程
2017/03/09 Python
详谈python read readline readlines的区别
2017/09/22 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
院领导写的就业推荐信
2014/03/09 职场文书
水电站项目建议书
2014/05/12 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js