Comment utiliser avec en JavaScript

En parlant du mot-clé with en js, la première impression de nombreux amis peut être que la fonction du mot-clé with est de changer la portée, et le point le plus important est que l'utilisation du mot-clé with n'est pas recommandée. Après avoir entendu que le mot-clé with n'est pas recommandé, beaucoup d'entre nous ignoreront le mot-clé with, pensant que nous pouvons simplement l'ignorer et simplement l'utiliser. Mais parfois, lorsque nous examinons certaines questions de code ou d'entretien, il y aura des questions liées au mot-clé with. Il existe de nombreux pièges auxquels vous n'avez jamais été exposé, il est donc toujours nécessaire de parler du mot-clé with.

Utilisation de base de with

L'intention initiale de l'instruction with est de fournir un raccourci de style espace de noms pour un accès aux objets niveau par niveau, c'est-à-dire dans le code spécifié. zone, directement via le nœud Le nom de l'objet appelant.
with est généralement utilisé comme raccourci pour référencer à plusieurs reprises plusieurs propriétés dans le même objet sans référencer à plusieurs reprises l'objet lui-même.
Par exemple, il existe actuellement un objet comme celui-ci :

var obj = {
    a: 1,
    b: 2,
    c: 3};

Si vous souhaitez modifier la valeur de chaque élément dans obj, la méthode d'écriture générale peut être la suivante :

// 重复写了3次的“obj”obj.a = 2;
obj.b = 3;
obj.c = 4;

Et en utilisant la méthode d'écriture de with, il y aura un simple raccourci

with (obj) {
    a = 3;
    b = 4;
    c = 5;
}

  Dans ce code, l'instruction with est utilisée pour associer l'objet obj, ce qui signifie qu'à l'intérieur du bloc de code with , chaque variable est d'abord considérée comme une variable locale. Si la variable locale a le même nom qu'une propriété de l'objet obj, la variable locale pointera vers la propriété de l'objet obj.

Inconvénients de with

Dans l'exemple ci-dessus, nous pouvons voir que with peut très bien nous aider à simplifier le code. Mais pourquoi n’est-ce pas recommandé ? Parlons des lacunes de with :

conduit à une fuite de données

Regardons la partie suivante du code

function foo(obj) {
    with (obj) {
        a = 2;
    }
}var o1 = {
    a: 3};var o2 = {
    b: 3}
foo(o1);
console.log(o1.a);  //2foo(o2);
console.log(o2.a);  //underfinedconsole.log(a);     //不好，a被泄漏到全局作用域上了

  Tout d'abord, analysons le code ci-dessus. Dans l'exemple, deux objets o1 et o2 sont créés. L’un d’eux possède l’attribut a, l’autre non. foo(obj) La fonction accepte un paramètre formel de obj, qui est une référence d'objet, et exécute with(obj) {...} sur l'objet. À l’intérieur du bloc with, il y a une référence lexicale à a, qui est en fait une référence LHS, et 2 lui est attribué.
 Lorsque nous passons o1, a = 2 l'opération d'affectation trouve o1.a et lui attribue 2. Lorsque o2 est transmis, o2 n'a pas de propriété, donc cette propriété ne sera pas créée et o2.a reste indéfini.

  Mais pourquoi le fonctionnement d'o2 entraîne-t-il une fuite de données ?
Ici, nous devons revenir au mécanisme de LHS查询 (pour plus de détails, veuillez vous rendre sur les requêtes LHS et RHS en JavaScript).
Lorsque nous passons o2 à with, la portée déclarée par with est o2, et LHS查询 part de cette portée vers a. L'identifiant a n'est pas trouvé dans le scope de o2, le scope de foo(…) et le scope global, donc en mode non strict, une variable globale sera automatiquement créée dans le scope global), en En mode strict, une ReferenceError exception sera levée.

Une autre raison pour laquelle with n'est pas recommandé. En mode strict, with est totalement interdit, tout comme les utilisations indirectes ou dangereuses de eval(…).

Dégradation des performances

With modifiera ou créera de nouvelles portées au moment de l'exécution, trompant ainsi d'autres portées lexicales définies au moment de l'écriture. with peut rendre le code plus évolutif. Bien qu'il existe une possibilité de fuite de données ci-dessus, cela peut être évité avec un peu d'attention. N'est-il pas possible de créer de bonnes fonctions ?
 La réponse est non. Examinons la partie suivante du code pour les raisons spécifiques.

Le code suivant peut être copié et exécuté directement

<script>function func() {
    console.time("func");    var obj = {
        a: [1, 2, 3]
    };    for(var i = 0; i < 100000; i++)
    {        var v = obj.a[0];
    }
    console.timeEnd("func");
}
func();function funcWith() {
    console.time("funcWith");    var obj = {
        a: [1, 2, 3]
    };    with(obj) {        for(var i = 0; i < 100000; i++) {            var v = a[0];
        }
    }
    console.timeEnd("funcWith");
}
funcWith();</script>

Ensuite, testez l'effet :

Dans un code qui gère la même logique, le temps d'exécution sans with n'est que de 4,63 ms. La durée d'utilisation de with est de 81,87 ms.


Pourquoi ça ?
 La raison est que le moteur JavaScript effectuera plusieurs optimisations de performances lors de la phase de compilation. Certaines de ces optimisations reposent sur la capacité d'analyser statiquement le code en fonction de son lexique et de prédéterminer où toutes les variables et fonctions sont définies afin que les identifiants puissent être trouvés rapidement lors de l'exécution.
Mais si le moteur trouve with dans le code, il peut simplement supposer que tout jugement sur la position de l'identifiant est invalide, car il n'y a aucun moyen de connaître le contenu de l'objet passé à with pour créer la nouvelle portée lexicale . Quoi.
Le cas le plus pessimiste est que si with apparaît, toutes les optimisations peuvent n'avoir aucun sens. Par conséquent, l’approche la plus simple que le moteur adoptera est de ne procéder à aucune optimisation. Si le code utilise beaucoup de with ou eval(), il s'exécutera certainement très lentement. Peu importe à quel point le moteur est intelligent pour essayer de minimiser les effets secondaires de ces cas pessimistes, il ne peut éviter le fait que sans ces optimisations, le code s'exécutera plus lentement .

Cet article explique l'utilisation de with en JavaScript. Pour plus de contenu connexe, veuillez faire attention au site Web chinois php.

Recommandations associées :

imbrication js et php

js bloquant l'événement par défaut et js bloquant l'événement bouillonnant exemple de partage js empêche événements bouillonnants

Façons courantes d'écrire et d'appeler des fonctions js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!