Jak przekazać ten kontekst do funkcji?

Myślałem, że byłoby to coś, co mógłbym łatwo znaleźć w Google, ale może nie zadaję właściwego pytania ...

Jak ustawić cokolwiek „to” odnosi się do danej funkcji javascript?

na przykład, podobnie jak w przypadku większości funkcji jQuery, takich jak:

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

Jak pisać / wywoływać własne samodzielne funkcje, które mają odpowiednie „to” odniesienie po wywołaniu? Używam jQuery, więc jeśli istnieje specyficzny dla jQuery sposób, byłoby to idealne.

JavaScript .call()i .apply()metody pozwalają ustawić kontekst dla funkcji.

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

var obj_a = {
    name:  "FOO"
};

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

Teraz możesz zadzwonić:

myfunc.call(obj_a);

Co by zaalarmowało FOO. Odwrotnie, przekazywanie obj_bbyłoby ostrzeżeniem BAR!!. Różnica między .call()i .apply()polega na tym, że .call()pobierana jest lista rozdzielona przecinkami, jeśli przekazujesz argumenty do swojej funkcji i .apply()potrzebujesz tablicy.

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

Dlatego możesz łatwo napisać funkcję hookza pomocą apply()metody. Na przykład chcemy dodać funkcję do .css()metody jQuerys . Możemy zapisać oryginalne odwołanie do funkcji, zastąpić funkcję niestandardowym kodem i wywołać zapisaną funkcję.

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

Ponieważ magiczny argumentsobiekt jest obiektem podobnym do tablicy, możemy go po prostu przekazać apply(). W ten sposób gwarantujemy, że wszystkie parametry zostaną przekazane do oryginalnej funkcji.

Użyjfunction.call :

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

Gdzie thatjest obiekt, który ma być thisw funkcji.

jQuery używa .call(...)metody do przypisania bieżącego węzła do thisfunkcji przekazywanej jako parametr.

EDYTOWAĆ:

Nie bój się zaglądać do kodu jQuery, gdy masz wątpliwości, wszystko jest w przejrzystym i dobrze udokumentowanym JavaScript.

tzn .: odpowiedź na to pytanie jest około linii 574,
callback.call( object[ name ], name, object[ name ] ) === false

Możesz użyć funkcji powiązania, aby ustawić kontekst thisfunkcji.

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

Kolejny podstawowy przykład:

Nie działa:

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

Pracujący:

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

Więc w zasadzie: po prostu dodaj .bind (this) do swojej funkcji