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 22 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
JS前端加密算法示例
Dec 22 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
小程序实现文字循环滚动动画
Jun 14 Javascript
关于React Native使用axios进行网络请求的方法
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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
php计算十二星座的函数代码
2012/08/21 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
python区块及区块链的开发详解
2019/07/03 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
python argparser的具体使用
2019/11/10 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
文史专业毕业生自荐信
2013/11/17 职场文书
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
法制宣传月活动总结
2014/04/29 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
思想政治表现评语
2015/01/04 职场文书
闪闪的红星观后感
2015/06/08 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
python OpenCV学习笔记
2021/03/31 Python
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
为什么RedisCluster设计成16384个槽
2021/09/25 Redis