Javascript：函数中的变量重新声明导致未定义[重复]

Question

这个问题已经在这里有了答案：

• JavaScript变量未定义vs未定义 2个答案

为什么console.log(foo)产生undefined而不是'bar'

var foo = 'bar';
(function() {
    console.log(foo);
    if(foo === 'baz') {
        var foo = 'qux';
    }
})();

—但如果将var foo替换为foo则会产生'bar' ？ 我知道重新声明变量是不好的做法，但是无论如何都不会对var foo = 'qux'进行求值，即使这样，它也不应该做任何事情，对吗？

JSFiddle

Answer 1

Javascript“提升”变量声明，这意味着在代码后面出现的变量声明被“提升”到其包含范围的顶部。 这意味着：

(function() {
    console.log(foo);
    if(foo === 'baz') {
        var foo = 'qux'
    }
});

变成：

(function() {
    var foo;
    console.log(foo);
    if(foo === 'baz') {
         foo = 'qux'
    }
}); 

即使从未显式运行foo的重新分配/“重新声明”。 足够好，总结起来的吊装远远不止足够。

但是，乍看之下，我们的示例看起来像是这个问题的案例。 诀窍是，由于功能都有自己的范围，从它们所包含的范围继承 （在这种情况下，全球性的），声明任何变量，即使它存在于继承的范围内，可以保证被undefined分配之前。

---

我最初想提出这个问题，因为我认为这是setTimeout和clearTimeout的错误，因为这样的代码不断抛出Cannot set property 'className' of undefined ：

var timer;
document.getElementById('ele').addEventListener('mousewheel', function() {
    var that = this;
    clearTimeout(timer);
    timer = setTimeout(function() {
        that.className = 'foo';
        if(false) { //this condition shouldn't have ever been true in my test cases
            var that = document.getElementById('otherEle');
            setTimeout(function() { /* Things to do with otherEle in 1s */ }, 1000);
        }
    }, 200);
}, false);

后来我发现var that重新声明的变量是罪魁祸首，经过一些研究，得出结论认为，起吊和功能范围界定应归咎于此。 不过，我不知道我对范围界定的解释是否完全准确，希望得到反馈。