Pourquoi ai-je besoin d'utiliser le mot-clé "this" pour accéder à un paramètre pour une fonction auto-exécutable anonyme?

Question

Je commence tout juste à apprendre Javascript et j'ai joué avec des fonctions auto-exécutables anonymes. J'ai fait du code qui ne fonctionne pas comme je m'y attendais. Pourquoi le mot clé "this" est-il nécessaire pour obtenir la valeur de la variable "shoutIt" dans cette instance?

La première alerte affiche "A-t-elle fonctionné? (1) indéfini" tandis que la seconde affiche "A-t-elle fonctionné? (2) [OUI!]".

Merci!

var shoutIt = "[YES!]"; 

//creating an anonymous, self-executing function 
(
    function (shoutIt) { 
     shoutItDebug = shoutIt; 
     shoutItDebug = this.shoutIt; 
     alert("Did it work? (1) " + shoutIt); //doesn't work, undefined 
     alert("Did it work? (2) " + this.shoutIt) //works 
})(); 

Answer 1

parce que votre fonction anonyme attend shoutIt comme argument, mais vous passez rien à lui.

Fondamentalement, votre fonction attend un paramètre shoutIt. Ce paramètre sera dans la portée locale de la fonction. Si rien n'est passé, et quand le compilateur récupérera la valeur de shoutIt, il accèdera à partir de la portée locale maintenant et ne passera pas au niveau global. Au niveau local, puisque vous n'êtes pas de passage quoi que ce soit à la fonction, il vous donne undefined

Il y a deux solutions à ce

1) Passer la valeur de shoutIt

var shoutIt = "[YES!]"; 

//creating an anonymous, self-executing function 
(
    function (shoutIt) { //expecting that value 
     shoutItDebug = shoutIt; 
     shoutItDebug = this.shoutIt; 
     alert("Did it work? (1) " + shoutIt); 
     alert("Did it work? (2) " + this.shoutIt) 
})(shoutIt);**strong text** //passing argument to the function 

OU

2) ne passez aucun paramètre

var shoutIt = "[YES!]"; 

//creating an anonymous, self-executing function 
(
    function() { 
     shoutItDebug = shoutIt; 
     shoutItDebug = this.shoutIt; 
     alert("Did it work? (1) " + shoutIt); 
     alert("Did it work? (2) " + this.shoutIt) 
})(); 

Comment 'ceci' fonctionne

Fondamentalement, 'ceci' fait référence au contexte en javascript. Par défaut, il pointe vers l'objet fenêtre. Essayez de le faire

console.log(this) //outputs the window object 

Tout ce qui est défini au niveau global est automatiquement lié à l'objet window.

Answer 2

Il y a deux variables appelées shoutIt ici: l'une est la variable globale définie par var shoutIt, et l'autre est une variable définie par l'argument formel dans function (shoutIt) { ...

Lorsque vous exécutez une fonction non-méthode (c.-à-de le formulaire foo() plutôt que bar.foo()) en mode non strict, this est égal à l'objet global (dans le navigateur, window). Dans la fonction, this.shoutIt fait référence à la variable shoutIt dans la portée globale.

Par contraste, shoutIt fait référence ici à l'argument de fonction avec ce nom, au lieu de la variable globale, qui est un niveau d'étendue supérieur. (La variable globale est "ombrée" par la variable plus immédiate du même nom.) La fonction n'est appelée avec aucun argument, donc la valeur de shoutIt dans la fonction est undefined.

Si vous voulez passer une valeur à utiliser comme argument nommé shoutIt, offre un dans les parenthèses Invocation:

(function (shoutIt) { 
    ... 
})(someValue); 

Answer 3

vous êtes paramètre est le même nom que la variable en dehors de la fonction et vous ne passez pas une variable dans la fonction. Avec votre exemple, vous pouvez faire plusieurs choses différentes pour le faire fonctionner comme vous l'attendez.

A. Passe shoutIt dans la fonction

var shoutIt = "[YES!]"; 
//creating an anonymous, self-executing function 
(
    function (shoutIt) { 
     shoutItDebug = shoutIt; 
     shoutItDebug = this.shoutIt; 
     alert("Did it work? (1) " + shoutIt); //doesn't work, undefined 
     alert("Did it work? (2) " + this.shoutIt) //works 
})(shoutIt); 

B. Modifier le nom du paramètre dans votre définition de la fonction.

var shoutIt = "[YES!]"; 

//creating an anonymous, self-executing function 
(
    function (shoutItAgain) { 
     shoutItDebug = shoutIt; 
     shoutItDebug = this.shoutIt; 
     alert("Did it work? (1) " + shoutIt); //doesn't work, undefined 
     alert("Did it work? (2) " + this.shoutIt) //works 
})();