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 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
通过隐藏option实现select的联动效果
Nov 10 Javascript
JavaScript 继承使用分析
May 12 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
Feb 11 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
Node.js学习入门
Jan 03 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
JS实现手写parseInt的方法示例
Sep 24 Javascript
js实现无缝滚动双图切换效果
Jul 09 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
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程序员基本要求和必备技能
2014/05/09 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
js常用函数 不错
2006/09/08 Javascript
Javascript & DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
教师通用专业自荐书范文
2014/02/11 职场文书
需求分析说明书
2014/05/09 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
结婚仪式主持词
2015/06/29 职场文书
国家助学金受助感言
2015/08/01 职场文书
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers