Was ist falsch mit der Definition von JavaScript-Variablen innerhalb von if-Blöcken?

Ich habe einige code wie dieser:

if (condition) {
var variable = blah;
}

if (differentcondition) {
var variable = blah;
}

Ist das richtig?

Ich gehe davon aus, dass die variable wäre nicht zugewiesen, wenn die Bedingung nicht true zurückgibt.

JSLint hält, mir mitzuteilen, variable bereits definiert ist.

Mache ich das falsch?

Dank.

OK, Hier ist meine eigentliche Anwendungsfall, ich mache event-delegation wie diese:

$("#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
    }

});

Eigentlich diese 2-Klassen schließen sich nicht gegenseitig aus.

Dies funktioniert für mich, aber ist es richtig?

Die Antworten waren sehr informativ, aber ich verstehe immer noch nicht, wie ich das einrichten der Variablen, die hier.

Eigentlich möchte ich auch sagen, dass bestimmte Bedingungen schließen sich gegenseitig aus, und bestimmte Bedingungen nicht.

Wie sollte ich die Struktur dieser?

Wahrscheinlich sollte ich habe dieses Beispiel, von Anfang an.

  • Ich würde diese Methode verwenden: var variable = (Bedingung) ? "foo" : "bar";
InformationsquelleAutor Mark | 2009-07-22
  1. 32

    Weil javascript so genannte "Hochziehen", wodurch Ihr code tun Dinge, die Sie nicht Aussehen wie Sie es tun sollten. Im Grunde bedeutet das, dass ein javascript-interpreter bewegen wird, alle var-Deklarationen, unabhängig davon, wo Sie sind im Körper von einer Funktion, um den Anfang der Funktion Körper. Dann wird es alle verschieben-Funktion von Definitionen an die Spitze, knapp alle vars. Dann wird es fertig kompilieren Sie die Funktion.

    Putting eine Variable innerhalb einer if-Anweisung, nicht gegen die "Regeln" der Sprache, aber es bedeutet, dass, da der var hochziehen, dass der var wird definiert, unabhängig davon, ob die if-Anweisung die Bedingung erfüllt ist.

    Beachten Sie auch, dass hochziehen beinhaltet nicht die Belegung, so wie andere haben darauf hingewiesen, dass der var-Deklarationen werden nach oben und undefiniert, bis Sie erst später vergeben.

    Dies ist ein Beispiel für eine Funktion, muss haben schien eine gute Idee zu der Zeit, aber es hat sich mehr verwirrend als hilfreich.

    • Danke, wow. So viele gute Antworten, ich weiß nicht, was man zu Holen.
    • es ist eine verwirrende feature, aber es wäre verwirrend, wenn Sie könnte-mix-Funktion und block scope.
    • Lassen Sie die Verwirrung gehoben werden! [Wortspiel beabsichtigt]: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
    InformationsquelleAutor Breton
  2. 12

    Dies ist, weil Sie in JavaScript Variablen haben nur unterschiedliche Gültigkeitsbereiche innerhalb von Funktionsbausteinen. Im Gegensatz zu anderen Sprachen, wenn die Blöcke nicht über einen anderen Bereich, in JavaScript.

    In Ihrem Fall, JSLint, würden Sie sagen, ist die variable schon definiert, da es möglich ist, dass beide Bedingungen erfüllt sind, in welchem Fall Sie würde das überschreiben der Variablen.

    Hier ist ein Beispiel, wie die Bereiche Arbeit, in 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);
}
    • +1. Außerdem sollten Sie die Namen Ihrer Variablen etwas sinnvolles, nicht nur die "variable" (was ist schlecht, sowieso, weil es sein könnte ein reserviertes Schlüsselwort in einigen Sprachen).
    • Ja, vielen Dank. Außerdem möchte ich wissen, ob ich sollte die Mühe ändern mein code da für meine Fall ist es nicht der Fall sein wird, die beiden würden ifs true zurück.
    • Ich würde den code ändern. Wenn die 2 Bedingungen sich gegenseitig ausschließen, dann sollten Sie überlegen, die Umstrukturierung der code für die Verwendung von if-else, nicht 2 ifs.
    InformationsquelleAutor Dan Herbert
  3. 6

    Nur Funktionen erstellen, innere Umfang. Es kommt noch hairier wie in diesem Beispiel.

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

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

    Erste Warnung tatsächlich sagen wird nicht definiert. Warum? Da alle Variablen Initialisierungen, die auftreten, in der Funktion initialisiert, undefiniert zu Beginn der Funktion. Das ist der Grund, warum Crockford sagt die Initialisierung aller Variablen so früh wie möglich.

    Sodass Ihr code sollte wohl so Aussehen: 

    $("#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
        }

});
    • Fabelhaft, vielen Dank!
    InformationsquelleAutor Jason Harwig
  4. 0

    Sind die beiden if-Bedingungen gegenseitig ausschließen? Vielleicht möchten Sie verwenden die "else" - Kontrollstruktur:

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

    Dies bedeutet, dass, wenn die erste Bedingung true ist, wird der zweite Teil des Codes nie ausgeführt werden.

    Im Allgemeinen, es ist besser die Variablen deklarieren, innerhalb der Struktur, die Sie verwendet werden in. Wenn die variable soll nur innerhalb der if-Anweisung zu deklarieren, es ist in Ordnung, anderenfalls verschieben Sie es außerhalb, zum Beispiel so:

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

    Hinweis: wenn Sie separate ifs ohne else, dann müssen Sie die variable auf einen Standardwert ersten.

    InformationsquelleAutor DisgruntledGoat
  5. 0

    Wie sollte ich die Struktur dieser?

    In diesem Fall, wie es aussieht, wäre es besser, nest die Bedingungen:

    $("#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
        }
    }
});

    Oder noch besser, verwenden Sie die jQuery event delegation:

    $("#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
    }
});
    InformationsquelleAutor 1j01
Schreibe einen Kommentar