什么'；在if块中定义JavaScript变量有什么错？

我有一些这样的代码：

if (condition) {
var variable = blah;
}

if (differentcondition) {
var variable = blah;
}

$("#container").click(function (event){ 

    if ($(event.target).is('img.class1')) {
        var imagesrc = $(event.target).attr('src');
        // Do something with imagesrc
    }

    if ($(event.target).is('img.class2')) {
        var imagesrc = $(event.target).attr('src');
        // Do something with imagesrc
    }

    // This condition is mutually exclusive to the above 2
    if ($(event.target).is('img.class3')) {
        var imagesrc = $(event.target).attr('src');
        // Do something with imagesrc
    }

    // This condition is mutually exclusive to 1 and 2 but not to 3
    if ($(event.target).is('img.class4')) {
        var imagesrc = $(event.target).attr('src');
        // Do something with imagesrc
    }

});

这是正确的吗

我假设如果条件不返回true，就不会分配变量

JSLint一直告诉我，变量已经定义了

我做错了吗

谢谢

好的，这是我的实际用例，我正在这样做事件委派：

if (condition) {
var variable = blah;
}

if (differentcondition) {
var variable = blah;
}

$("#container").click(function (event){ 

    if ($(event.target).is('img.class1')) {
        var imagesrc = $(event.target).attr('src');
        // Do something with imagesrc
    }

    if ($(event.target).is('img.class2')) {
        var imagesrc = $(event.target).attr('src');
        // Do something with imagesrc
    }

    // This condition is mutually exclusive to the above 2
    if ($(event.target).is('img.class3')) {
        var imagesrc = $(event.target).attr('src');
        // Do something with imagesrc
    }

    // This condition is mutually exclusive to 1 and 2 but not to 3
    if ($(event.target).is('img.class4')) {
        var imagesrc = $(event.target).attr('src');
        // Do something with imagesrc
    }

});

实际上，这两个类并不是相互排斥的

这对我有用，但对吗

答案非常有用，但我仍然不明白如何在这里设置变量

其实我也想说，有些条件是相互排斥的，有些条件不是

我应该如何构造这个

---

我可能应该从一开始就使用这个例子。

这是因为在JavaScript中，变量在函数块中的作用域不同。与其他语言不同，if块在JavaScript中没有不同的作用域

在您的情况下，JSLint会告诉您变量已经定义，因为这两个条件可能都是真的，在这种情况下，您将覆盖变量

下面是JavaScript中作用域工作原理的示例：

function Something() {
    var thing1 = "hello";

    (function() {
        var thing2 = "world";
    })();

    // This line will throw a ReferenceError because "thing2" is not defined in this scope
    // It only exists within the scope of the function executed above
    alert(thing1 + thing2);
}

function SomethingElse() {
    var thing1 = "hello";

    if(true) {
        var thing2 = "world";
    }

    // This line will work because thing2 is not limited to the if-block
    alert(thing1 + thing2);
}

---

这两个if条件是否相互排斥？也许您想使用“else”控制结构：

if (condition) {
    var variable = blah;
}
else if (differentcondition) {
    var variable = blah;
}

这意味着，如果第一个条件为true，则永远不会执行代码的第二部分

一般来说，最好在所使用的结构中声明变量。如果变量应仅存在于If语句中，则声明该变量为罚款，否则，将其移出，如下所示：

var variable;
if (condition) {
    variable = blah;
}
else if (differentcondition) {
    variable = blah;
}
// continue to use variable here...

---

注意：如果使用单独的ifs而不使用else，则需要先将变量设置为默认值。

只有函数才能创建内部作用域。它变得更加毛茸茸的，就像在这个例子中

var x = 2;
function foo() {
    alert(x); // will alert undefined?!?

    var x = 4;
}
foo();
alert(x); // will alert 2

第一个警报实际上是未定义的。为什么？因为函数中发生的所有变量初始化在函数开始时都被初始化为未定义。这就是为什么Crockford说要尽早初始化所有变量

因此，您的代码可能如下所示：

$("#container").click(function (event){ 
        var imagesrc;
        if ($(event.target).is('img.class1')) {
                imagesrc = $(event.target).attr('src');
                // Do something with imagesrc
        }

        if ($(event.target).is('img.class2')) {
                imagesrc = $(event.target).attr('src');
                // Do something with imagesrc
        }

        // This condition is mutually exclusive to the above 2
        if ($(event.target).is('img.class3')) {
                imagesrc = $(event.target).attr('src');
                // Do something with imagesrc
        }

        // This condition is mutually exclusive to 1 and 2 but not to 3
        if ($(event.target).is('img.class4')) {
                imagesrc = $(event.target).attr('src');
                // Do something with imagesrc
        }

});

---

因为javascript有一个叫做“提升”的东西，它让你的代码做一些看起来不应该做的事情。基本上，这意味着javascript解释器会将所有var声明（无论它们在函数体中的位置）移动到函数体的顶部。然后它会将所有函数定义移到顶部，就在所有变量的下面。然后它将完成函数的编译

将var放入if语句并不违反语言的“规则”，但这意味着，由于var的提升，无论if语句的条件是否满足，都将定义该var

还要记住，提升并不包括赋值，所以正如其他人所指出的，var声明将被移到顶部，并保持未定义状态，直到稍后进行赋值

这是一个在当时看来一定是个好主意的功能的例子，但事实证明它更令人困惑而不是有用

我应该如何构造这个

在这种情况下，最好嵌套以下条件：

$("#container").click(function (event) {
    if ($(event.target).is('img')) {
        var imagesrc = $(event.target).attr('src');

        if ($(event.target).is('.class1')) {
            // Do something with imagesrc
        }

        if ($(event.target).is('.class2')) {
            // Do something with imagesrc
        }

        // This condition is mutually exclusive to the above 2
        if ($(event.target).is('.class3')) {
            // Do something with imagesrc
        }

        // This condition is mutually exclusive to 1 and 2 but not to 3
        if ($(event.target).is('.class4')) {
            // Do something with imagesrc
        }
    }
});

或者最好使用jQuery的事件委派：

$("#container").on("click", "img", function (event) {
    var imagesrc = $(this).attr('src');

    if ($(this).is('.class1')) {
        // Do something with imagesrc
    }

    if ($(this).is('.class2')) {
        // Do something with imagesrc
    }

    // This condition is mutually exclusive to the above 2
    if ($(this).is('.class3')) {
        // Do something with imagesrc
    }

    // This condition is mutually exclusive to 1 and 2 but not to 3
    if ($(this).is('img.class4')) {
        // Do something with imagesrc
    }
});

---

+1.此外，你应该给变量起个有意义的名字，而不仅仅是“variable”（这一点很糟糕，因为在某些语言中它可能是一个保留关键字）。是的，非常感谢。我还想知道我是否应该修改我的代码，因为对于我的用例来说，两个if都不会返回true，我会修改代码。如果这2个条件是互斥的，那么你应该考虑重构代码，如果不是，则使用2个IFS。谢谢，哇。这么多好的答案，我不知道该选哪一个。这是一个令人困惑的特性，但如果你能混合函数和块作用域，它会更令人困惑。@worc让困惑被解除吧！[双关语]：我会使用这个方法：var variable=（condition）？“foo”：“bar”；