Obtention de toutes les variables dans la portée

Existe-t-il un moyen d'obtenir toutes les variables qui sont actuellement à portée en javascript?

Non. Les variables "dans la portée" sont déterminées par la "chaîne de portée", qui n'est pas accessible par programme.

Pour plus de détails (en grande partie), consultez la spécification ECMAScript (JavaScript). Voici un lien vers la page officielle où vous pouvez télécharger la spécification canonique (un PDF), et en voici un vers la version HTML officielle et linkable.

Mise à jour basée sur votre commentaire à Camsoft

Les variables dans la portée de votre fonction d'événement sont déterminées par l'endroit où vous définissez votre fonction d'événement, et non par la façon dont elles l'appellent. Mais , vous pouvez trouver des informations utiles sur ce qui est disponible pour votre fonction via thiset des arguments en faisant quelque chose dans le sens de ce que KennyTM a souligné ( for (var propName in ____)) car cela vous dira ce qui est disponible sur divers objets qui vous sont fournis ( thiset des arguments; si vous êtes vous ne savez pas quels arguments ils vous donnent, vous pouvez le découvrir via la argumentsvariable implicitement définie pour chaque fonction).

Ainsi, en plus de ce qui est dans la portée en raison de l'endroit où vous définissez votre fonction, vous pouvez découvrir ce qui est disponible par d'autres moyens en faisant:

var n, arg, name;
alert("typeof this = " + typeof this);
for (name in this) {
    alert("this[" + name + "]=" + this[name]);
}
for (n = 0; n < arguments.length; ++n) {
    arg = arguments[n];
    alert("typeof arguments[" + n + "] = " + typeof arg);
    for (name in arg) {
        alert("arguments[" + n + "][" + name + "]=" + arg[name]);
    }
}

(Vous pouvez développer cela pour obtenir des informations plus utiles.)

Au lieu de cela, cependant, j'utiliserais probablement un débogueur comme les outils de développement de Chrome (même si vous n'utilisez pas normalement Chrome pour le développement) ou Firebug (même si vous n'utilisez pas normalement Firefox pour le développement), ou Dragonfly sur Opera ou "Outils de développement F12" sur IE. Et lisez les fichiers JavaScript qu'ils vous fournissent. Et battez-les au-dessus de la tête pour obtenir des documents appropriés. :-)

Bien que tout le monde réponde " Non " et je sais que "Non" est la bonne réponse, mais si vous avez vraiment besoin d'obtenir des variables locales d'une fonction, il existe un moyen restreint.

Considérez cette fonction:

var f = function() {
    var x = 0;
    console.log(x);
};

Vous pouvez convertir votre fonction en chaîne:

var s = f + '';

Vous obtiendrez la source de la fonction sous forme de chaîne

'function () {\nvar x = 0;\nconsole.log(x);\n}'

Vous pouvez maintenant utiliser un analyseur comme esprima pour analyser le code de fonction et trouver des déclarations de variables locales.

var s = 'function () {\nvar x = 0;\nconsole.log(x);\n}';
s = s.slice(12); // to remove "function () "
var esprima = require('esprima');
var result = esprima.parse(s);

et trouver des objets avec:

obj.type == "VariableDeclaration"

dans le résultat (j'ai supprimé console.log(x)ci-dessous):

{
    "type": "Program",
    "body": [
        {
            "type": "VariableDeclaration",
            "declarations": [
                {
                    "type": "VariableDeclarator",
                    "id": {
                        "type": "Identifier",
                        "name": "x"
                    },
                    "init": {
                        "type": "Literal",
                        "value": 0,
                        "raw": "0"
                    }
                }
            ],
            "kind": "var"
        }
    ]
}

J'ai testé cela dans Chrome, Firefox et Node.

Mais le problème avec cette méthode est que vous n'avez que les variables définies dans la fonction elle-même. Par exemple pour celui-ci:

var g = function() {
    var y = 0;
    var f = function() {
        var x = 0;
        console.log(x);
    };
}

vous avez juste accès au x et non au y . Mais vous pouvez toujours utiliser des chaînes d' appel (arguments.callee.caller.caller.caller) dans une boucle pour trouver des variables locales des fonctions d'appel. Si vous avez tous les noms de variables locales, vous avez donc des variables d'étendue . Avec les noms de variables, vous avez accès aux valeurs avec un simple eval.

Oui et non. "Non" dans presque toutes les situations. «Oui», mais uniquement de manière limitée, si vous souhaitez vérifier la portée globale. Prenons l'exemple suivant:

var a = 1, b = 2, c = 3;

for ( var i in window ) {
    console.log(i, typeof window[i], window[i]);
}

Qui génère, parmi plus de 150 autres choses , les éléments suivants:

getInterface function getInterface()
i string i // <- there it is!
c number 3
b number 2
a number 1 // <- and another
_firebug object Object firebug=1.4.5 element=div#_firebugConsole
"Firebug command line does not support '$0'"
"Firebug command line does not support '$1'"
_FirebugCommandLine object Object
hasDuplicate boolean false

Il est donc possible de répertorier certaines variables dans la portée actuelle, mais ce n'est pas fiable, succinct, efficace ou facilement accessible.

Une meilleure question est de savoir pourquoi voulez-vous savoir quelles variables sont dans la portée?

Dans ECMAScript 6, c'est plus ou moins possible en enveloppant le code dans une withinstruction avec un objet proxy. Notez qu'il nécessite un mode non strict et que c'est une mauvaise pratique.

function storeVars(target) {
  return new Proxy(target, {
    has(target, prop) { return true; },
    get(target, prop) { return (prop in target ? target : window)[prop]; }
  });
}
var vars = {}; // Outer variable, not stored.
with(storeVars(vars)) {
  var a = 1;   // Stored in vars
  var b = 2;   // Stored in vars
  (function() {
    var c = 3; // Inner variable, not stored.
  })();
}
console.log(vars);

Le proxy prétend être propriétaire de tous les identifiants référencés à l'intérieur with, donc les affectations de variables sont stockées dans la cible. Pour les recherches, le proxy récupère la valeur de la cible proxy ou de l'objet global (pas la portée parent). letetconst variables ne sont pas incluses.

Inspiré par cette réponse de Bergi .

Tu ne peux pas.

Les variables, identificateurs de déclarations de fonction et arguments pour le code de fonction, sont liés en tant que propriétés de l' objet variable , qui n'est pas accessible.

Voir également:

• Chaîne de portée et résolution de l'identifiant

Le moyen le plus simple d'accéder à Vars dans une portée particulière

1. Ouvrir les outils de développement> Ressources (dans Chrome)
2. Ouvrir un fichier avec une fonction qui a accès à cette portée (astuce cmd / ctrl + p pour trouver le fichier)
3. Définissez un point d'arrêt à l'intérieur de cette fonction et exécutez votre code
4. Lorsqu'il s'arrête à votre point d'arrêt, vous pouvez accéder à la portée var via la console (ou la fenêtre var portée)

Remarque: Vous voulez faire cela contre des js non minifiés.

Le moyen le plus simple de montrer tous les Vars non privés

1. Ouvrir la console (dans Chrome)
2. Type: this.window
3. Appuyez sur Entrée

Vous verrez maintenant une arborescence d'objets que vous pouvez développer avec tous les objets déclarés.

Comme tout le monde l'a remarqué: vous ne pouvez pas. Mais vous pouvez créer un obj et affecter chaque var que vous déclarez à cet obj. De cette façon, vous pouvez facilement vérifier vos vars:

var v = {}; //put everything here

var f = function(a, b){//do something
}; v.f = f; //make's easy to debug
var a = [1,2,3];
v.a = a;
var x = 'x';
v.x = x;  //so on...

console.log(v); //it's all there

J'ai fait un violon mettant en œuvre (essentiellement) les idées ci-dessus décrites par iman. Voici à quoi cela ressemble lorsque vous passez la souris sur le deuxième ipsum dansreturn ipsum*ipsum - ...

Les variables qui sont dans la portée sont mises en évidence là où elles sont déclarées (avec des couleurs différentes pour différentes portées). lelorem bordure rouge est une variable ombrée (pas dans la portée, mais dans la portée si l'autre lorem plus bas dans l'arbre ne serait pas là.)

J'utilise la bibliothèque esprima pour analyser le JavaScript, et estraverse, escodegen, escope (bibliothèques utilitaires au-dessus d'esprima.) Le `` gros travail '' est fait par toutes ces bibliothèques (la plus complexe étant esprima elle-même, bien sûr.)

Comment ça fonctionne

ast = esprima.parse(sourceString, {range: true, sourceType: 'script'});

crée l'arbre de syntaxe abstrait. Ensuite,

analysis = escope.analyze(ast);

génère une structure de données complexe encapsulant des informations sur toutes les étendues du programme. Le reste rassemble les informations encodées dans cet objet d'analyse (et l'arbre de syntaxe abstrait lui-même), et en fait un schéma de coloration interactif.

La bonne réponse n'est donc pas «non», mais «oui, mais». Le "mais" étant un gros problème: vous devez essentiellement réécrire des parties importantes du navigateur Chrome (et c'est devtools) en JavaScript. JavaScript est un langage complet de Turing, ce qui est bien sûr possible en principe. Ce qui est impossible, c'est de faire le tout sans utiliser l'intégralité de votre code source (sous forme de chaîne), puis de faire des choses très complexes avec cela.

Si vous souhaitez simplement inspecter les variables manuellement pour faciliter le débogage, lancez simplement le débogueur:

debugger;

Directement dans la console du navigateur.