Table des matières
eval
avec
catch
Performances
Résumé
Maison interface Web js tutoriel JavaScript triche l'évaluation lexicale, avec et catch et leurs problèmes de performances

JavaScript triche l'évaluation lexicale, avec et catch et leurs problèmes de performances

Feb 28, 2017 pm 02:58 PM

Normalement parlant, la chaîne de portée du contexte d'exécution ne changera pas

La portée lexicale en JavaScript n'est pas statique
(portée lexicale/portée statique : la portée est déterminée par la fonction position de déclaration lors de l'écriture du code)
Il existe plusieurs mécanismes qui peuvent tromper le lexique
Ce sont with(), eval() et la clause catch de l'instruction try-catch
où with et eval nous devrions ne pas utiliser (cela posera beaucoup de problèmes)
Tricher lexical signifie tricher sur la portée lexicale
En d'autres termes, ils changent la chaîne de portée au moment de l'exécution
Laissez-moi en parler ci-dessous Ces mécanismes qui peuvent tromper le lexique

eval

La fonction eval() accepte une chaîne comme paramètre et analyse la chaîne pour générer du code

var a = 123;eval('console.log(a)');// 123
Copier après la connexion

Ensuite, la console imprime 123
Après avoir exécuté le fonction d'évaluation
le moteur js ne sait pas que ce code a été inséré dynamiquement et que la chaîne de portée a été modifiée
Le moteur recherchera toujours la chaîne de portée comme d'habitude
voir le code ci-dessous

var a = 1;function demo(){
    eval('var a = 2;');//欺骗词法
    console.log(a);// 2}
demo();
Copier après la connexion

Lorsque la fonction eval est exécutée, la variable a est ajoutée à la portée supérieure de l'environnement d'exécution de la fonction de démonstration
a dans cet environnement local "ombre" a dans l'environnement global
Finalement, le programme imprime 2

La fonction eval() peut non seulement modifier la portée dans laquelle elle se trouve actuellement, mais peut même modifier la portée globale
Quoi qu'il en soit, elle peut modifier la portée lexicale au moment de l'exécution

Les règles strictes d'ES5 mode ajoute quelques restrictions à cette fonction. J'ai ajouté le mode strict local au code ci-dessus

var a = 1;function demo(){    'use strict';    eval('var a = 2;');
    console.log(a);// 1}
demo();
Copier après la connexion

Nous avons constaté que cette fois la console affichait 1
C'est parce qu'en mode strict, eval() a sa propre portée lexicale indépendante lors de l'exécution (lui évitant de perturber la chaîne de portées de l'environnement d'exécution)
De cette façon, la déclaration qu'elle contient ne peut pas modifier la portée dans laquelle elle se trouve

Il existe deux autres méthodes qui peuvent générer dynamiquement du code qui lui est très similaire
timers setTimeout() Et setInterval() Le premier paramètre peut être une chaîne de code
et le constructeur de fonction new Function( Le dernier paramètre de ) accepte également le. chaîne de code
identique à eval(). N'utilisez pas cette utilisation, ce qui entraînerait de sérieux problèmes de performances. Nous discuterons de ce problème plus tard

avec

Une autre syntaxe de triche lexicale. le mot-clé with n'est pas recommandé
With est souvent utilisé comme raccourci pour référencer à plusieurs reprises plusieurs propriétés d'un objet
L'avantage est qu'il n'est pas nécessaire de référencer à plusieurs reprises l'objet lui-même
Par exemple, si je veux pour réutiliser l'objet console

console.log(1);console.info(2);console.warn(3);
Copier après la connexion

utilisez le mot-clé with

with(console){    log(1);    info(2);    warn(3);
}
Copier après la connexion

JavaScript triche lévaluation lexicale, avec et catch et leurs problèmes de performances

Il semble qu'il n'y ait aucun problème avec with, mais regardez ci-dessous

function demo(obj){
    with(obj){
        a = 5;
    }
}var obj1 = {a:1};var obj2 = {b:2};

demo(obj1);
console.log(obj1.a);// 5demo(obj2);
console.log(obj2.a);// undefinedconsole.log(a);//5 -->变量a居然泄漏到了全局环境
Copier après la connexion

Nous avons constaté que l'utilisation du mot-clé with modifiait a dans obj1
Mais non seulement cela n'ajoutait pas de a à obj2, mais cela provoquait des effets secondaires et le divulguait au monde entier
C'est car with peut traiter un objet Pour une portée lexicale complètement isolée (placée à l'avant de la chaîne de portée)
Donc l'exécution est générée à l'intérieura = 5;
Il recherchera le long de la chaîne de portée, mais ne sera pas trouvé, donc créez-le globalement Une variable a (sans déclaration var)

Remarque : Bien que with crée une portée lexicale, la déclaration var normale à l'intérieur de with ne sera pas limitée à la portée de ce bloc
C'est-à-dire La portée déclarée outside with
ressemble à ceci

function demo(){
    var obj = {};    with(obj){        var b = 1;
        console.log(b); // 1
    }
    console.log(b); // 1}
demo();
console.log(b);// Uncaught ReferenceError: b is not defined
Copier après la connexion

Et le mot-clé with ne peut tout simplement pas être utilisé en mode strict d'ES5
Si vous essayez de l'utiliser, vous verrez une erreur comme celle-ci :

JavaScript triche lévaluation lexicale, avec et catch et leurs problèmes de performances

catch

En plus de eval et with, la clause catch dans l'instruction try-catch peut également modifier la chaîne de portée de l'environnement d'exécution
Lorsqu'une erreur se produit dans le bloc de code try, le flux d'exécution passe immédiatement à la clause catch
, puis pousse l'objet d'exception dans un objet mutable et le place au début de la chaîne de portée, ce qui est très similaire à with
Une fois la clause catch exécutée, la chaîne de portée sera restaurée à son état d'origine

Mais contrairement à eval et with, try-catch est toujours relativement utile et n'a pas besoin d'être abandonné complètement (même si je ne l'ai pas utilisé)

Performances

La triche du lexique entraînera des problèmes de performances
Le moteur js effectuera une optimisation des performances pendant la phase de compilation. pour effectuer une analyse statique basée sur le lexique du code
Variables et fonctions prédéterminées Ce n'est qu'en définissant la position que vous pouvez trouver rapidement l'identifiant
Mais eval ou with ne peut pas déterminer la position de l'identifiant (elle existe lors de l'exécution du code et ne peut pas être analysée statiquement)
En d'autres termes : Devant eval et avec, le moteur js Toutes les optimisations n'ont aucun sens (tout simplement cool)
Comme cela n'a aucun sens, le moteur js ne sera tout simplement pas optimisé
Cela entraînera un fonctionnement plus lent du programme

Pour with, il a aussi ses propres problèmes de performances...
La création d'une portée entraînera toutes les variables locales de la fonction dans laquelle elle se trouve être dans le deuxième objet de la chaîne de portée
Le coût d'accès est plus élevé

Pour essayer- Si nous voulons utiliser l'instruction catch, nous pouvons le faire

try{    ...}catch(e){
    handleError(e);
}
Copier après la connexion

Seulement un morceau du code est exécuté dans l'instruction catch et délégué à une fonction pour gérer les erreurs
De cette façon, il n'y a pas d'accès aux variables locales
Les modifications temporaires de la chaîne de portée n'affecteront pas les performances

Résumé

Résumé des points clés

  • La portée lexicale signifie que la portée est déterminée par la position de la déclaration de fonction lors de l'écriture du code
    La phase d'analyse lexicale au moment de la compilation peut savoir où et comment tous les identifiants sont déclarés

  • eval peut être évalué sur des chaînes de code, modifiant ainsi la portée lexicale au moment de l'exécution

  • avec traite une référence d'objet comme une portée, cela crée une portée lexicale au moment de l'exécution

  • eval générera une portée lexicale indépendante en mode strict et ne pourra pas modifier la portée

  • With est interdit d'être utilisé en mode strict

  • eval et with (and catch) peuvent tromper le lexique et modifier la chaîne de portée pendant l'exécution

  • eval et avec pour conséquence que le moteur js soit incapable pour optimiser la recherche de portée pendant la phase de compilation (ne peut pas être analysée statiquement), provoquant un ralentissement du programme

Cela dit, je veux dire à tout le monde de ne pas utiliser les mots clés with et fonctions d'évaluation ~( ̄0 ̄)/

Ce qui précède est le contenu de JavaScript trompeur d'évaluation lexicale, avec et catch et ses problèmes de performances. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www. .php.cn ) !


Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 pm 02:54 PM

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.

WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel Dec 17, 2023 pm 05:30 PM

WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket

Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel Dec 17, 2023 pm 12:09 PM

Introduction à l'utilisation de JavaScript et de WebSocket pour mettre en œuvre un système de commande en ligne en temps réel : avec la popularité d'Internet et les progrès de la technologie, de plus en plus de restaurants ont commencé à proposer des services de commande en ligne. Afin de mettre en œuvre un système de commande en ligne en temps réel, nous pouvons utiliser les technologies JavaScript et WebSocket. WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, qui peut réaliser une communication bidirectionnelle en temps réel entre le client et le serveur. Dans le système de commande en ligne en temps réel, lorsque l'utilisateur sélectionne des plats et passe une commande

Notes de développement de Vue : évitez les problèmes courants d'utilisation de la mémoire et de performances Notes de développement de Vue : évitez les problèmes courants d'utilisation de la mémoire et de performances Nov 22, 2023 pm 02:38 PM

À mesure que Vue devient de plus en plus largement utilisée, les développeurs de Vue doivent également réfléchir à la manière d'optimiser les performances et l'utilisation de la mémoire des applications Vue. Cet article abordera certaines précautions à prendre pour le développement de Vue afin d'aider les développeurs à éviter les problèmes courants d'utilisation de la mémoire et de performances. Évitez les boucles infinies Lorsqu'un composant met continuellement à jour son propre état ou qu'un composant restitue continuellement ses propres composants enfants, une boucle infinie peut en résulter. Dans ce cas, Vue manquera de mémoire et rendra l'application très lente. Pour éviter cette situation, Vue propose un

Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 am 09:39 AM

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de réservation en ligne. À l'ère numérique d'aujourd'hui, de plus en plus d'entreprises et de services doivent fournir des fonctions de réservation en ligne. Il est crucial de mettre en place un système de réservation en ligne efficace et en temps réel. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de réservation en ligne et fournit des exemples de code spécifiques. 1. Qu'est-ce que WebSocket ? WebSocket est une méthode full-duplex sur une seule connexion TCP.

JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel Dec 17, 2023 pm 05:13 PM

JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. À mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en œuvre à travers des exemples de code spécifiques. Nous

Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Jan 05, 2024 pm 06:08 PM

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

Comment utiliser insertBefore en javascript Comment utiliser insertBefore en javascript Nov 24, 2023 am 11:56 AM

Utilisation : En JavaScript, la méthode insertBefore() est utilisée pour insérer un nouveau nœud dans l'arborescence DOM. Cette méthode nécessite deux paramètres : le nouveau nœud à insérer et le nœud de référence (c'est-à-dire le nœud où le nouveau nœud sera inséré).

See all articles