JavaScript变量声明提升与undefined陷阱解析

JavaScript变量声明提升与undefined陷阱解析

首先观察以下代码片段：

if (!("aa" in window)) {
alert('oh my god');
var aa = 1;
}  
alert("aa" in window);
alert(aa);

请思考并回答以下问题：

这段代码会报错吗？会触发几次弹窗？ 第二个alert显示的是true还是false？ 第三个alert输出的具体值是什么？ 背后的原理是什么？ 建议先思考并运行测试，若你能准确回答，后续内容可略读。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

变量声明与undefined的区别

在JavaScript中定义变量看似简单，直接使用var关键字，甚至省略var也可以：

var a = 1;

这里a是变量名，1是变量值。这属于基础概念，让我们看更复杂的代码：

var a;
alert(a);

使用Firebug测试，会弹出undefined。这是一个大家熟悉的字符串，通常表示变量未定义。但在我看来，既然已经使用了var，变量就已经被定义了，只是没有赋予具体值而已。

我们来看一个真正未定义的变量：

alert(a);

没错，这里直接alert一个从未出现过的变量，结果会如何？

Firebug直接报错：a is not defined。意思是变量a没有定义。结合前面的代码来看，这容易让人产生困惑。这种“未定义”与前面提到的“undefined”有何不同？

其实，前面的代码等价于以下写法：

var a = undefined;
alert(a);

也就是说，当声明变量而不赋值时，JavaScript会自动给变量赋予一个undefined值。注意，这是一个“值”，说明变量a已经存在，这个值被称为“未定义”。

而后面直接alert的情况，变量从未出现过，这才是真正的未定义。

简而言之：JavaScript中不存在没有值的变量，变量在声明时就已经被赋予了值。

变量提升机制详解

接下来看下面的代码：

alert(a);
var a = 1;

这段代码会报错吗？因为在alert执行时，变量a似乎还未出现。

然而，代码并未报错，而是弹出了undefined值。这表明变量a已经存在，只是其值并非我们预期的1，而是undefined。这又是为何？

因为var变量声明和函数声明一样，会发生提升（hoisting）。实际上，上面的代码等价于：

var a;
alert(a);
a = 1;

这样理解就清晰了。

因此，问题的关键在于：var声明会提升到作用域顶端，但赋值操作不会——这是一个令人纠结的设计，我不确定为何如此设定。个人认为这是JavaScript的一个缺陷。

现在有一种代码习惯，主张将变量声明统一放在作用域前方，大概正是考虑到这一点——即使你不写在前方，JavaScript也会将其提升到前方。

代码执行顺序与if语句陷阱

现在揭晓文章开头问题的答案：

只会弹出两个alert，而if语句内部的alert不会执行，因为var声明的提升特性，导致实际代码执行顺序如下：

var aa;
if (!("aa" in window)) {
alert('oh my god');
aa = 1;
}  
alert("aa" in window);
alert(aa);

虽然aa的值为空（undefined），但使用'aa' in window判断时会返回真，因为变量a确实存在，只是值为undefined。因此if语句内的代码不会执行。后面两个alert的结果不言自明。

个人感觉这是一个非常无厘头的问题，我们应该了解其背后的原因，但应警惕这种陷阱。

上述问题是我撰写本文的缘由。这段代码源自一篇网文，但文中未提供答案，让我百思不得其解，直到在Stack Overflow上提问才搞清楚。答案即为此篇文章。

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

对象属性访问的潜在风险

哈哈，原谅我，后面还有一个问题：

var b = {}
alert(b.aa);
alert(b.aa.bb);

这也是一种声明变量的方式，那么，这段代码会报错吗？为什么？