Pourquoi écrire ".call(this)" à la fin d'une fonction anonyme javascript ?

Question

J'ai vu du JavaScript écrit de cette manière (c'était lors d'une démonstration, et je n'ai pas le code réel sous la main, mais il était sous-entendu que c'était normal) :

(function() {    

    var a = 1;

    this.sayA = function() {
        alert(a);
    }

}).call(this);

sayA();

Je suppose qu'il s'agit d'une fonction anonyme, de sorte que la variable a n'est pas disponible au niveau mondial.

Quel pourrait être l'intérêt de la .call(this) être ? Cette fonction n'étant pas imbriquée, this n'était que la fenêtre. En quoi cela diffère-t-il d'une simple écriture ? () à la fin ?

Answer 1

J'étais également curieux de savoir ce qu'il en était, car je venais de voir l'exposé de John Resig sur les cette vidéo . Yoshi a donné une excellente réponse mais j'ai dû la tester un peu dans le journal de la console pour la comprendre et j'ai pensé que cette modification de sa réponse pourrait aider certaines personnes qui, comme moi, avaient des difficultés au début :

function Foo() {
  this.foo = true;
  (function () {
      console.log("Foo = " + this.foo);
      // Outputs undefined
  }());
  (function () {
      console.log("Foo = " + this.foo);
      // Outputs true
  }).call(this);

  (function () {
      console.log(this);
      // Outputs undefined in strict mode, or Window in non strict mode
      // Anonymous functions usually default to the global scope
  })();
}

var bar = new Foo;

Il m'a semblé un peu plus logique de voir la première et la seconde côte à côte, montrant que .call(this) vous permet essentiellement de passer le contexte actuel à une fonction anonyme.

Merci pour la question et merci à Yoshi pour la réponse claire !

Answer 2

Essayez ceci :

function Foo() {

  (function () {
    console.log(this);
    // > Foo
  }).call(this);

  (function () {
    console.log(this);
    // > undefined in strict mode, or Window in non strict mode
  })();
}

var bar = new Foo;

Si, pour une raison ou une autre, vous utilisez cette méthode, c'est une façon de rendre les IIFE comme s'il s'agissait d'une fonction membre de Foo notamment lors de la création d'instances d'un type d'objet défini par l'utilisateur.

Answer 3

Cette fonction n'étant pas imbriquée, this n'était que la fenêtre. En quoi cela diffère-t-il d'une simple écriture ? () à la fin ?

Non - pas en mode strict :

1. Si le code de la fonction est un code strict, définir le paramètre ThisBinding a thisArg .
2. Autre si thisArg es null ou undefined , fixer le ThisBinding à l'objet global.

En mode strict, le this est directement fixé à la valeur donnée, qui est undefined pour un appel normal. Par conséquent, .call(this) est utilisé pour transmettre l'objet global de manière explicite. Vous pouvez essayer dans la console :

> (function() { "use strict"; console.log(this); })()
undefined
> (function() { "use strict"; console.log(this); }).call(this)
Window

Cela ne fera peut-être pas de différence dans le cas d'un code bâclé, mais c'est une bonne pratique et c'est compatible avec l'avenir :-)

Answer 4

this transmise à la fonction définit le contexte d'exécution, de sorte qu'à l'intérieur de votre fonction anonyme this se réfère à la window .

Vous pouvez ensuite écrire this.alert(''); .