web-dev-qa-db-fra.com

Comment passer le ce contexte à une fonction?

Je pensais que je pourrais facilement y aller sur Google, mais peut-être que je ne pose pas la bonne question ...

Comment définir le terme "this" dans une fonction javascript donnée?

par exemple, comme avec la plupart des fonctions de jQuery telles que:

$(selector).each(function() {
   //$(this) gives me access to whatever selector we're on
});

Comment est-ce que j'écris/appelle mes propres fonctions autonomes qui ont une référence "ceci" appropriée quand elles sont appelées? J'utilise jQuery, donc s'il y a une façon de le faire spécifique à jQuery, ce serait l'idéal.

javascriptjqueryscopethis
193
user126715

Les méthodes Javascripts .call() et .apply() vous permettent de définir contexte pour une fonction.

var myfunc = function(){
    alert(this.name);
};

var obj_a = {
    name:  "FOO"
};

var obj_b = {
    name:  "BAR!!"
};

Maintenant, vous pouvez appeler:

myfunc.call(obj_a);

Ce qui alerterait FOO. Inversement, passer obj_b alerterait BAR!!. La différence entre .call() et .apply() est que .call() prend une liste séparée par des virgules si vous passez des arguments à votre fonction et que .apply() nécessite un tableau.

myfunc.call(obj_a, 1, 2, 3);
myfunc.apply(obj_a, [1, 2, 3]);

Par conséquent, vous pouvez facilement écrire une fonction hook en utilisant la méthode apply(). Par exemple, nous souhaitons ajouter une fonctionnalité à la méthode jQuerys .css(). Nous pouvons stocker la référence de fonction d'origine, écraser la fonction avec un code personnalisé et appeler la fonction stockée.

var _css = $.fn.css;
$.fn.css = function(){
   alert('hooked!');
   _css.apply(this, arguments);
};

Puisque l'objet magique arguments est un tableau semblable à un objet, nous pouvons simplement le transmettre à apply(). De cette façon, nous garantissons que tous les paramètres sont transmis à la fonction d'origine.

280
jAndy

tiliser :

_function.call(that, arg1, arg2, etc);

Où that est l'objet que vous voulez que this dans la fonction soit.

42
palswim

jQuery utilise une méthode .call(...) pour affecter le nœud actuel à this dans la fonction que vous transmettez en tant que paramètre.

EDIT:

N'ayez pas peur de regarder à l'intérieur du code de jQuery quand vous avez un doute, tout est en Javascript clair et bien documenté.

à savoir: la réponse à cette question concerne la ligne 574,
callback.call( object[ name ], name, object[ name ] ) === false

16
Mic

Vous pouvez utiliser la fonction bind pour définir le contexte de this au sein d'une fonction.

function myFunc() {
  console.log(this.str)
}
const myContext = {str: "my context"}
const boundFunc = myFunc.bind(myContext);
boundFunc(); // "my context"
10
Scott Jungwirth

Un autre exemple de base:

Ne fonctionne pas:

var img = new Image;
img.onload = function() {
   this.myGlobalFunction(img);
};
img.src = reader.result;

Travail:

var img = new Image;
img.onload = function() {
   this.myGlobalFunction(img);
}.bind(this);
img.src = reader.result;

Donc, fondamentalement: ajoutez simplement .bind (this) à votre fonction

5
Joery