Comment passer le contexte this à une fonction?

Je pensais que ce serait quelque chose que je pourrais facilement google, mais peut-être que je ne pose pas la bonne question ...

Comment puis-je définir ce que "ceci" fait référence 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 puis-je écrire / appeler mes propres fonctions autonomes qui ont une référence "this" appropriée lorsqu'elles sont appelées? J'utilise jQuery, donc s'il y a une manière spécifique à jQuery de le faire, ce serait idéal.

Les javascripts .call()et les .apply()méthodes vous permettent de définir le contexte d'une fonction.

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

var obj_a = {
    name:  "FOO"
};

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

Vous pouvez maintenant appeler:

myfunc.call(obj_a);

Ce qui alerterait FOO. Dans l'autre sens, le passage obj_balerterait 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 avez .apply()besoin d'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 hooken utilisant la apply()méthode. Par exemple, nous voulons ajouter une fonctionnalité à la .css()méthode jQuerys . 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' argumentsobjet magique est un objet semblable à un tableau, nous pouvons simplement le passer à apply(). De cette façon, nous garantissons que tous les paramètres sont transmis à la fonction d'origine.

Utilisationfunction.call :

var f = function () { console.log(this); }
f.call(that, arg1, arg2, etc);

Où se thattrouve l'objet que vous voulez thisdans la fonction.

jQuery utilise une .call(...)méthode pour affecter le nœud actuel à l' thisintérieur de la fonction que vous passez en tant que paramètre.

ÉDITER:

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

c'est-à-dire: la réponse à cette question est autour de la ligne 574,
callback.call( object[ name ], name, object[ name ] ) === false

Vous pouvez utiliser la fonction de liaison pour définir le contexte thisau sein d'une fonction.

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

Un autre exemple de base:

Ca 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