web-dev-qa-db-fra.com

Comment définir une variable globale à partir d'une fonction

Comment définir une variable globale à partir d'une fonction?

$(document).ready(function() {
    var option = '';

    $("[name=select_option_selected]").change(function() { 
        var option = $(this).val();
        alert(option); // Example: Foo  
    });

    alert(option); // Need it to alert Foo from the above change function    
});
javascriptjquery
16
Phill Pafford

Déclarez-le en dehors de la portée de votre jQuery déjà

var option = '';

$(document).ready(function() {
    $("[name=select_option_selected]").change(function() { 
        option = $(this).val();
        alert(option); // Example: Foo  
    });

    alert(option); //This will never be "Foo" since option isn't set until that select list changes
});

si vous voulez initialiser ceci à la valeur actuellement sélectionnée, essayez ceci:

var option = "";
var $select_option_selected = null;

$(function() {        
    $select_option_selected = $("[name='select_option_selected']")
    $select_option_selected.change(function() { 
        option = $(this).val();
    });    
    option = $select_option_selected.val();
});
25
hunter

_ {La mauvaise façon} _

Comme le soulignent les autres réponses, il est pas une bonne idée de créer des variables globales. Et comme ils le soulignent, vous pouvez créer une variable globale en:

  • Déclarer une variable en dehors de toutes les fonctions
  • Initialisation de votre variable sans le mot clé var
  • Ou, en le déclarant comme une propriété de l'objet window: window.options = 'blah';

Utilisation de la méthode Data() de jQuery

Mais il existe un meilleur moyen de créer une valeur accessible de manière globale en utilisant jQuery (et d'autres bibliothèques). Dans jQuery, utilisez la méthode data() pour stocker les valeurs associées aux éléments DOM:

// store 'blah' at document root
$(document).data('mysite.option', 'blah');

// retrieve value
alert($(document).data('mysite.option'));

Avis "mysite"... Il est judicieux d’espacer les noms de vos clés de données pour la même raison que les variables globales d’espace de noms en javascript.

6
typeof
$(document).ready(function() {
    var option = '';

    $("[name=select_option_selected]").change(function() { 
        option = $(this).val(); //no declaration of new variable, JavaScript goes to what encloses the function
        alert(option); // Example: Foo  
    });

    alert(option); // Need it to alert Foo from the above change function    
});
4
Zirak

Vous pouvez utiliser le préfixe window. pour accéder à une variable globale à partir de la portée d'une fonction. 

window.option = ...;
3
JaredPar

Deux approches non mentionnées par personne d’autre, applicables lorsque: 1. vous n’avez pas accès à la global LexicalEnvironment,10.2.3 et 2. essayez d'écrire du code que vous souhaitez prendre en charge, dans lequel une référence directe à l'objet global15.1 (comme window dans le DOM HTML ou GLOBAL dans le nœud[1]) n'est pas garanti:

  1. Faire un indirect15.1.2.1.1 appelez eval, en l'enveloppant dans une expression primaire superflue, ainsi: (1,eval)(...) (l'opérateur digit et virgule n'ont pas de sens)… puis en appelant le résultat. Cela oblige le code à être exécuté dans le contexte d'exécution global.10.4.2

    Nous pouvons alors déclarer10.5 une nouvelle variable dans l'environnement lexical global, comme suggéré ci-dessus; ou, d'ailleurs, faire tout ce que nous désirons dans cet environnement:

    function global_define(ident, value){
   (1,eval) ("var "+ident+"; (function(v){ "+ident+" = v })") (value) }

  2. Pour éviter les contournements (et, pour démarrer, éviter l'appel FUD - ridden eval), nous pouvons accéder directement à l'objet global et définir une propriété 4.2 sur celui-ci, qui sera alors disponible en tant que variable globale ailleurs dans notre code.[2]

    Au lieu de suivre l'approche eval ci-dessus et d'accéder à l'objet global via le code que nous avons écrit dans le contexte global, il s'avère que nous pouvons accéder à l'objet global sous la valeur this.10.4.3 dans n'importe quelle fonction appelée avec null:

    var global = (function(){ return this }).call(null)
global[ident] = value

Phew.

D'accord, lisez plus loin, pour ceux d'entre vous qui ne vous êtes pas encore évanoui par les liens de spécification et les appels eval:

  1. @kangax couvre toutes les bases assez complètement . Sérieusement, lisez ceci si vous avez des questions auxquelles je n’ai pas répondu ici (y compris celles concernant le support des navigateurs d’importantes idiosyncrasies!)

  2. Évidemment, les sections pertinentes de la spécification ECMAScript 5 elle-même, pour avoir une idée de la façon dont les choses sont destinées à fonctionner dans un monde idéal. Non, vraiment bien; Je sais que les spécifications sont une idée effrayante, mais les spécifications ES («JavaScript») sont l’une des spécifications les plus faciles à lire et à comprendre que je n’ai jamais vues. Ils sont vraiment excellents. De note immédiate, et sans ordre particulier,

[1]: La discussion dans d'autres réponses suggérant que exports dans Node.js et d'autres systèmes compatibles CommonJS est en quelque sorte liée à l'objet global, à propos de laquelle cette question est posée, est trompeuse. En termes de conception de système, il serait peut-être plus approprié d'utiliser les outils de module de leur environnement que de fouiller dans l'objet global… mais c'est une discussion pour un autre post de Stack Overflow. (=

[2]: Pour ceux d'entre vous qui suivent la spécification, il est plus difficile de démontrer que les membres de propriété de l'objet global sont accessibles en tant que déréférences d'identificateur. Commencez par 10.2.1.2Enregistrements d'environnement d'objet et 10.2.3L'environnement global pour comprendre comment l'objet global est lié à un environnement, puis passez à 18.12.3, 18.12.2, et 18.12.1 dans cet ordre, décrivant collectivement [[Get]] sur l'objet global .

Nota bene: À aucun moment de cette élaboration, je n'ai suggéré de faire l'une ou l'autre de ces choses comme une bonne idée. Ou, d'ailleurs, que l'interaction avec le global scope est une bonne idée. N'ayant aucun rapport avec la question posée, mais offerte pour apaiser ma propre conscience, j'ajoute que j'enveloppe tout mon code propre dans un IIFE commençant immédiatement en haut du fichier; Ceci, associé à l'application religieuse du mot clé var, garantit que je n'interagirai jamais avec la gestion par JavaScript de l'objet global du tout. Un énorme gâchis, évité. Tu devrais faire ça. Je l'ai dit. Je suis intelligente. (;

3
ELLIOTTCABLE

Êtes-vous sûr de vouloir? les variables globales sont généralement à éviter. Dans le navigateur, window est l’objet global. Par conséquent, si vous faites window.option = ..., alors option sera disponible globalement. 

Je recommande fortement de nommer une variable globale quelque chose de plus unique que "option", pour éviter de surcharger les éléments existants. 

Une autre option, que je ne recommande pas non plus: laisser var 

myvariable = 'foo';

Si myvariable n'a jamais été défini auparavant, elle sera déclarée comme une propriété sur window, ce qui la rend globale. Ceci est généralement considéré comme une (très) mauvaise pratique cependant.

3
Matt Greer

http://jsfiddle.net/Kba5u/

var foo = 'bar';

function changeFooToBaz(){
   foo = 'baz';
}

// changeFooToBaz();
console.log(foo); #=> 'bar'

Décommentez maintenant l'appel à changeFooToBaz:

var foo = 'bar';

function changeFooToBaz(){
   foo = 'baz';
}

changeFooToBaz();
console.log(foo); #=> 'baz'

changeFooToBaz a en effet changé le contenu de foo, une variable déclarée à une portée supérieure à celle de la fonction.

1
Starkers

il suffit de déclarer un objet global 

var obj={};
function my_function()
{
 obj['newVariable'] = 'someValue';
}

de cette façon, j'ai atteint la variable globale.

1
Dark Prince