Définition et étendue de la variable JavaScript

Question

J'essaie de comprendre comment la portée variable fonctionne lorsque vous liez un événement.

L'exemple suivant fonctionne très bien:

function clickHandler() { 
    alert(foo); 
} 

var foo = true; 

$('div').on({ 
    'click': clickHandler 
}); 

Voir: http://jsfiddle.net/OliverJAsh/7fM5U/4/

Cependant, quand je fais ce simple changement, il ne fonctionne plus:

function clickHandler() { 
    alert(foo); 
} 

(function() { 
    var foo = true; 

    $('div').on({ 
     'click': clickHandler 
    }); 
}()); 

Voir: http://jsfiddle.net/OliverJAsh/7fM5U/3/

Comment feriez-vous à propos de faire la sec exemple de travail? Puis-je faire n'importe quoi avec .call? Je me demande ceci parce que la fonction est appelée là où la variable est définie, donc je veux qu'elle ait accès à cela.

MISE À JOUR:

Je comprends pourquoi il ne peut pas accéder à la variable - mais parce que la fonction est appelée à partir duquel la variable est définie, je me suis demandé comment je pourrais le faire fonctionner, sans déplacer le champ d'application de choses. Je pense que je pose des questions sur la méthode .call.

Answer 1

javascript variables sont SCOPED dans les fonctions - donc la portée de foo est dans votre (function() { .. }()); anonyme qui n'est pas visible clickHandler.

Pour résoudre ce problème, vous pouvez apporter la fonction clickHandler dans la fonction anonyme comme ceci:

(function() { 
    var foo = true; 
    var clickHandler = function() { 
    alert(foo); 
    } 

    $('div').on({ 
    'click': clickHandler 
    }); 
}()); 

Mise à jour

Si vous ne pouvez pas modifier la portée si la fonction clickHandler et ne souhaitez pas pour changer la signature non plus, vous pouvez utiliser the call function comme ceci:

function clickHandler() { 
    alert(this); 
} 

(function() { 
    var foo = true; 
    $('div').on({ 
    'click': function() { clickHandler.call(foo); } 
    }); 
}()); 

Answer 2

Si vous déclarez une variable dans une fonction à l'aide var, il ne sera accessible au sein cette fonction, ou dans les fonctions qui sont déclarées au sein qui fonctionnent.

clickHandler est déclaré en dehors de la fonction dans laquelle foo est déclaré, il n'est donc pas accessible.

Si vous déplacez la déclaration de clickHandler pour être dans la fonction, you'll see it works fine;

(function() { 
    var foo = true; 


    function clickHandler() { 
     alert(foo); 
    } 

    $('div').on({ 
     'click': clickHandler 
    }); 
}()); 

Si vous ne pouvez pas déplacer clickHandler, vous devrez le modifier pour accéder foo en tant que paramètre;

function clickHandler(foo) { 
    alert(foo); 
} 

(function() { 
    var foo = true; 

    $('div').on({ 
     'click': function() { 
      // We can access `foo` here because the function is being declared within the scope of `foo`. 
      clickHandler(foo); 
     } 
    }); 
}()); 

Answer 3

parce que var foo n'est pas défini publiquement ....essayez ce code

var foo = true; 
function clickHandler() { 
    alert(foo); 
} 
(function() { 
    foo = true; 
    $('div').on({ 
     'click': clickHandler 
    }); 
}()); 

Answer 4

lorsque vous enveloppez la fonction avec une fonction anonyme, l'analyseur javascript analyser tout le bloc ensemble et exécuter comme bloc séparé.

vous devez mettre la définition de votre fonction clickHandler dans le bloc