Analyse approfondie de l’utilisation de With

With est utilisé pour étendre la chaîne de portée d'une instruction, mais il n'est généralement pas recommandé d'utiliser l'instruction with car elle peut être la source d'erreurs confuses et de problèmes de compatibilité. Il existe des points fonctionnels utilisant l'instruction with dans le code source de Vue, ses fonctions seront donc présentées ici pour aider à lire le code source du framework. L'instruction

Avants et inconvénients des performances

Pros

with peut réduire la longueur des variables sans entraîner de perte de performances. L’effort de calcul supplémentaire est minime. L'utilisation de « with » peut réduire les opérations inutiles de résolution de chemin de pointeur. Mais dans la plupart des cas, même sans utiliser with, l'utilisation de variables temporaires pour enregistrer les pointeurs ou l'utilisation de call peut obtenir le même effet. L'instruction

désavantages

with amène le programme à rechercher d'abord dans l'objet spécifié lors de la recherche de valeurs de variable. Par conséquent, les variables qui ne sont pas des attributs de cet objet seront très lentes à trouver.

Exemple

let obj = {
    a: 1,
    b: 2,
    c: 3
}
with(obj){
    console.log(a)    //1
    console.log(b)    //2
    console.log(c)    //3
}

Dans ce code, l'objet obj associé à, dans le bloc de code with, chaque variable est d'abord considérée comme une variable locale, si cette variable locale est liée au objet obj Si une propriété porte le même nom, cette variable locale pointera vers la propriété de l'objet obj.

function fn(obj){
    with(obj){
        a = 1;
    }
}
let obj1 = {
    a: 2
}
let obj2 = {
    b: 3
}

fn(obj1);
console.log(obj1.a)     //1

fn(obj2)
console.log(obj2.a)     //undefined
console.log(a)          //1，变量a被泄漏到全局作用域链上

Dans l'exemple ci-dessus, obj1 a un attribut a, mais obj2 n'a pas d'attribut a. fn(obj) reçoit un paramètre formel obj, qui est une référence d'objet, et s'exécute avec(obj). À l’intérieur du bloc de code with, a est en fait une référence et 1 est attribué à a.

Lors du passage de obj2 à with, la portée déclarée par with est obj2 et la requête pour a démarre à partir de cette portée. L'identifiant a n'est pas trouvé dans la portée d'obj2, la portée de fn et la portée globale. Par conséquent, dans le mode non strict, une variable globale sera automatiquement créée dans la portée globale, et dans. le mode strict En mode , une erreur ReferenceError sera générée.

Réduction des performances

Si with est utilisé dans le code, le moteur JS ne peut que simplement supposer que le jugement sur l'identifiant sera invalide pendant la phase de compilation car le compilation Le contrôleur n'a également aucun moyen de savoir à qui appartient l'objet scope transmis. Par conséquent, l'optimisation des performances effectuée par le moteur JS dans la phase de compilation sera invalide. Le pire des cas est que si with apparaît, toutes les optimisations perdront leur sens. Le moyen le plus simple est de ne faire aucune optimisation, cela fonctionnera alors très lentement, ce qui sera un fait inévitable.

with

Vue dans Vue générera la fonction de rendu correspondante à partir du modèle lors de la compilation, et l'instruction with se trouve être utilisée dans cette fonction de rendu. D'après ce qui précède, il n'est pas recommandé d'utiliser l'instruction with. Pourquoi est-elle utilisée dans Vue ?

Recommandations associées : "tutoriel vue.js"

function render () {
  with (this) {
    return _c('p',{on:{"click":change}},[_c('span',[_v(_s(number))]),_v(" "),_c('span',     [_v(_s(name))])])
  }
}

Étant donné que la portée de with correspond exactement à la portée du modèle, cela peut grandement simplifier le processus de compilation du modèle. La quantité de code avec with est très faible et il est plus fiable de laisser le traitement de la portée au moteur JS. Bien sûr, la situation la plus idéale est d'éliminer l'utilisation de with. Lors de la pré-compilation, le code généré par la première compilation subira automatiquement un traitement supplémentaire, utilisera une analyse AST complète pour traiter la portée, supprimera with et prendra en charge ES6 par le. manière. En d'autres termes, si vous utilisez webpack + vue, le code final généré n'aura pas de with.

Recommandations associées :

Résumé des questions d'entretien Front-end Vue 2020 (avec réponses)

tutoriel vue Recommandé : Les 5 dernières sélections de didacticiels vidéo vue.js en 2020

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

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!