web-dev-qa-db-fra.com

portée de la variable javascript dans l'instruction IF

Les variables déclarées et affectées dans une instruction "if" ne sont-elles visibles que dans ce bloc "if" ou dans l'ensemble de la fonction?

Suis-je en train de faire cela correctement dans le code suivant? (semble fonctionner, mais déclarer plusieurs fois "structure var" semble gênant) des solutions plus propres?

    function actionPane(state) {
    if(state === "ed") {
        var structure = {
            "element" : "div",
            "attr" : {
                "class" : "actionPane"
            },
            "contains" : [{
                "element" : "a",
                "attr" : {
                    "title" : "edit",
                    "href" : "#",
                    "class" : "edit"
                },
                "contains" : ""
            }, {
                "element" : "a",
                "attr" : {
                    "title" : "delete",
                    "href" : "#",
                    "class" : "delete"
                },
                "contains" : ""
            }]
        }
    } else {
        var structure = {
            "element" : "div",
            "attr" : {
                "class" : "actionPane"
            },
            "contains" : [{
                "element" : "a",
                "attr" : {
                    "title" : "save",
                    "href" : "#",
                    "class" : "save"
                },
                "contains" : ""
            }, {
                "element" : "a",
                "attr" : {
                    "title" : "cancel",
                    "href" : "#",
                    "class" : "cancel"
                },
                "contains" : ""
            }]
        }
    }
    return structure;
}
javascriptvariablesif-statementscope
48
Joseph

1) les variables sont visibles pour l'ensemble de la portée de la fonction . Par conséquent, vous ne devez les déclarer qu'une seule fois.

2) Vous ne devez pas déclarer la variable deux fois dans votre exemple. Je recommanderais de déclarer la variable en haut de la fonction, puis de définir la valeur plus tard:

function actionPane(state) {
    var structure;
    if(state === "ed") {
        structure = {    
            ...

Pour d'excellents commentaires sur JavaScript, je recommande fortement d'utiliser JSLint par Douglas Crockford. Il analysera votre code pour les erreurs courantes et trouvera des suggestions de nettoyage.

Je recommande également de lire le petit livre JavaScript: The Good Parts . Il contient de nombreux conseils pour écrire du code JS maintenable.

47
OverZealous

JavaScript n'a pas de "portée de bloc", il n'a qu'une portée de fonction - donc les variables déclarées à l'intérieur d'une instruction if (ou tout bloc conditionnel) sont "hissées" vers la portée extérieure.

if(true) {
    var foo = "bar";
}
alert(foo); // "bar"

Cela dépeint en fait une image plus claire (et ressort des interviews, par expérience :)

var foo = "test";
if(true) {
    alert(foo); // Interviewer: "What does this alert?" Answer: "test"
    var foo = "bar";
}
alert(foo); // "bar" Interviewer: Why is that? Answer: Because JavaScript does not have block scope

L'étendue des fonctions, en JavaScript, fait généralement référence aux fermetures.

var bar = "heheheh";
var blah = (function() {
    var foo = "hello";
    alert(bar); // "heheheh"
    alert(foo); // "hello" (obviously)
});

blah(); // "heheheh", "hello"
alert(foo); // undefined, no alert

La portée interne de la fonction a accès à l'environnement dans lequel elle est contenue, mais pas l'inverse.

Pour répondre à votre deuxième question, l'optimisation peut être obtenue en construisant initialement un objet "minimal" qui satisfait toutes les conditions, puis en l'augmentant ou en le modifiant en fonction de conditions particulières qui ont été satisfaites.

41
karim79

ECMAScript 2015 (ES6) inclut deux nouveaux mots-clés qui permettent enfin à JavaScript de réaliser une portée de bloc appropriée sans avoir besoin d'utiliser une syntaxe familière:

  1. let
  2. const
3
TheDarkIn1978

Les variables déclarées à l'intérieur de l'instruction if seront disponibles en dehors tant qu'elles résident dans la même fonction.

Dans votre cas, la meilleure façon serait de déclarer la structure puis de modifier les parties de l'objet qui diffèrent dans les deux cas:

var structure = {
    "element" : "div",
    "attr" : {
        "class" : "actionPane"
    },
    "contains" : [{
        "element" : "a",
        "attr" : {
            "title" : "edit",
            "href" : "#",
            "class" : "edit"
        },
        "contains" : ""
    }, {
        "element" : "a",
        "attr" : {
            "title" : "delete",
            "href" : "#",
            "class" : "delete"
        },
        "contains" : ""
    }]
}

if(state != "ed") {
    // modify appropriate attrs of structure (e.g. set title and class to cancel)
}
2
Eric Conner

les variables déclarées et affectées dans une instruction "if" ne sont-elles visibles que dans ce bloc "if" ou dans l'ensemble de la fonction?

En Javascript, toutes les variables sont soit

  • portée mondiale
  • portée locale (entier fonction) - Javascript n'a pas de "portée de bloc" où les variables ne sont disponibles qu'avec un bloc plus petit de la portée locale (fonction)

est-ce que je fais cela correctement dans le code suivant? (semble fonctionner, mais déclarer plusieurs fois "structure var" semble maladroit) des solutions plus propres?

Oui. Une solution plus propre pourrait consister à créer une classe de base de structure et à modifier ce qui est différent dans chaque cas.

2
foxy