2010-09-02 10 views
162

Ich dachte, das wäre etwas, das ich leicht googlen könnte, aber vielleicht stelle ich nicht die richtige Frage ...Wie übergebe ich diesen Kontext an eine Funktion?

Wie setze ich "was" in einer JavaScript-Funktion?

zum Beispiel, wie mit den meisten Funktionen jQuery wie:

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

Wie schreibe ich/meine eigene Standalone-Funktionen aufrufen, die eine entsprechende „dieses“ Referenz haben, wenn sie aufgerufen? Ich benutze jQuery. Wenn es eine jQuery-spezifische Vorgehensweise gibt, wäre das ideal.

+0

Mögliche doppelte: http://stackoverflow.com/questions/520019/controlling-the-value-of-this-in-a-jquery-event/520417#520417 – user123444555621

+0

Ich weiß, das ist eine alte Frage , aber für andere, die hier landen, sehen Sie jQuery '$ .proxy' – RyBolt

Antwort

240

Javascripts .call() und .apply() Methoden können Sie den Kontext für eine Funktion festlegen.

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

var obj_a = { 
    name: "FOO" 
}; 

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

Jetzt können Sie anrufen:

myfunc.call(obj_a); 

Welche FOO würde alarmieren. Umgekehrt würde obj_bBAR!! durchgeben. Der Unterschied zwischen .call() und .apply() besteht darin, dass .call() eine durch Kommas getrennte Liste verwendet, wenn Sie Argumente an Ihre Funktion übergeben und .apply() ein Array benötigt.

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

Daher können Sie ganz einfach eine Funktion hook unter Verwendung der apply() Methode schreiben. Zum Beispiel möchten wir eine Funktion zu jQuerys .css() Methode hinzufügen. Wir können die ursprüngliche Funktionsreferenz speichern, die Funktion mit benutzerdefiniertem Code überschreiben und die gespeicherte Funktion aufrufen.

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

Da die Magie arguments Objekt ein Array wie Objekt ist, können wir geben es nur zu apply(). So stellen wir sicher, dass alle Parameter an die ursprüngliche Funktion übergeben werden.

+2

Nur ein lustiger Leckerbissen: wenn Sie die Funktion wiederholt in Bezug auf' obj_a' aufrufen müssen, können Sie eine Kopie davon mit 'var boud_myfunc = myfunc erstellen .bind (obj_a) 'und einfach' bound_myfunc() 'nach Bedarf aufrufen. – Will

37

Use:

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

Wo that das Objekt, mit dem Sie this in der Funktion sein soll.

+0

'Funktion' ist ein reserviertes Schlüsselwort; Überlegen Sie, Ihre Antwort so zu aktualisieren, dass sie eine benannte Funktion enthält, da 'function.call (...)' kein gültiges JavaScript ist. –

+0

@DanielAllen: Ohne die Definition von was auch immer Sample-Funktion Name würde ich liefern, wird der Code immer noch einen JS-Fehler werfen. Aber ich habe den Namen der Beispielfunktion aktualisiert. – palswim

14

jQuery verwendet eine .call(...) Methode, um den aktuellen Knoten this innerhalb der Funktion zuzuweisen, die Sie als Parameter übergeben.

EDIT:

Haben Sie keine Angst innerhalb jQuery-Code zu suchen, wenn Sie Zweifel haben, es ist alles klar und gut dokumentiert Javascript.

das heißt: die Antwort auf diese Frage ist, um die Linie 574,
callback.call(object[ name ], name, object[ name ]) === false

1

können Sie verwenden, um die bind Funktion den Kontext this innerhalb einer Funktion zu setzen.

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