JavaScript Hoisting 的问题

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 4095 days ago, the information mentioned may be changed or developed.

最近在学习 JavaScript 然后刚好碰到这个神奇的问题，百思不得其解：

var a = 1;

function foo() {
if (!a) {
var a = 2;
}
alert(a);
};

foo();

结果：2

上面的 function foo() 中的 alert 弹出了 2 ，应该是说明了 if 里的 var a 被提升了。但是提升不是只提升变量的声明吗？想问为什么 a 被成功赋值为 2 了？(ಠ .̫.̫ ಠ)

然后我尝试把 if 的条件改为了 false 后：

var a = 1;

function foo() {
if (false) {
var a = 2;
}
alert(a);
};

foo();

结果：undefined

说好的提升呢？(☍﹏⁰) 不提升好歹也弹出全局变量的 1 把？为什么是 undefined？？？？(♩￢3￢)

真心求指教，被这个提升搞到头都大了。

Supplement 1 · Apr 9, 2015

感谢各位的回答！！！！现在整个人豁然开朗了。
那我就以我已经了解的来解释一下我自己所提问的问题吧。

源代码：
var a = 1;

function foo() {
if (!a) {
var a = 2;
}
alert(a);
};

foo();

解释器解释后：
function foo() {
var a;
if (!a) {
a = 2;
}
alert(a);
};

var a = 1;

foo();

解释器解释后详解：
1、 [函数声明优于变量声明，所以被提升与 var a = 1; 上面]
function foo() {
2、 [因为函数里的 if 里有 var = a 变量声明，故被提升至函数作用域的顶部]
var a;
3、 [此时被提升的 var a 相当于 var a = void(); 所以 a = false 则 !a = true]
if (!a) {
4、 [所以 a =2 就被成功的赋值了]
a = 2;
}
alert(a);
};

var a = 1;

foo();

Supplement 2 · Apr 9, 2015

1、 [函数声明优于变量声明，所以被提升与 var a = 1; 上面] -> 1、 [函数声明优于变量声明，所以被提升至全局 var a = 1; 上面]

Supplement 3 · Apr 9, 2015

3、 [此时被提升的 var a 相当于 var a = void(); 所以 a = false 则 !a = true] -> 3、 [此时被提升的 var a 相当于 var a = void 0; 所以 a = false 则 !a = true]

var

foo

alert

12 replies • 2015-04-09 17:49:24 +08:00

luin

Apr 9, 2015

第一段代码相当于：
var a = 1;

function foo() {
var a;
if (!a) {
a = 2;
}
alert(a);
};

foo();

更进一步：

var a = 1;

function foo() {
var a = void 0;
if (!a) {
a = 2;
}
alert(a);
};

foo();

aaronlam

Apr 9, 2015

@luin 感谢回答！！！！
我知道 if 里的 var a 会被提升。但是为什么 a = 2 也被成功的执行了呢？

ChiangDi

Apr 9, 2015 via Android

if 是不会被提升的吧！第一个之所以输出2是因为
函数被提到最上面了，那时候 a 还没定义，所以 if(!a)为真，执行了 a =2。我是这么想的。

luin

Apr 9, 2015

因为 if (!a) 这个条件是真值（a 的值是 void 0，因此 a 是假值，!a是真值），所以会执行 a = 2。

ChiangDi

Apr 9, 2015 via Android

好像不太对。

ChiangDi

Apr 9, 2015 via Android

@luin 的回答是正解。

RoshanWu

Apr 9, 2015

`function` 先于 `var a = 1` 被解析哟。前者内部在解析的时候，a = window.a = undefined, 后者是个干扰，额呵呵~
想更加深入地了解，请看： http://roshanca.com/2012/traps-in-javascript-part-I/

话说这个系列写于两年前一直是 part I，这两天一定要逼自己更新了啊啊啊！

aaronlam

Apr 9, 2015

@ChiangDi 感谢，但是按照你这么说，解释器解释后是这样

function foo() {
if (!a) {
var a = 2;
}
alert(a);
};

var a = 1;

foo();

全局的 var a = 1; 应该还是会被声明并定义。
看了下 4 楼的回答后感觉整个人豁然开朗了。。

aaronlam

Apr 9, 2015

@luin 感谢！！！！

ChiangDi

Apr 9, 2015 via Android

@aaronlam 对的，我理解错了， luin 那个是正解。

aaronlam

Apr 9, 2015

@RoshanWu 嗯，原来我是被 if 里的 var a 提升坑了。原来提升后 var a = void (); 然后 void(); 代表的是 f alse (ಠ .̫.̫ ಠ)

iDelicious

Apr 9, 2015

JS中函数和变量的声明会被提前执行