2016-03-23 5 views
3

Aufruf einer Funktion zu einem Handler JQuery geben

function test() { 
 
    var str = 'adarsh'; 
 

 
    // f1(); - This gives an error. 
 
    $('body').click(function f1() { 
 
    console.log(str); 
 
    }); 
 
} 
 

 
test();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ich möchte wissen, warum das obige Snippet einen Fehler gibt, wenn ich versuche f1() innerhalb der Funktionstest zuzugreifen.

Was ist die Funktion f1 Bereich?
Ich weiß, es ist nicht das Fenster, weil ich window.f1 nach dem Ausführen des obigen Snippets nicht zugreifen kann.

Hinweis: Ich weiß, dass ich Funktion f1 zuerst deklarieren und dann den Verweis auf sie in der click Funktion übergeben. Ich möchte jedoch wissen, was es heißt, 'anonyme' Funktionen in solchen Kontexten zu benennen, wenn wir nirgendwo durch diesen Namen darauf zugreifen können.

+0

Ihre 'f1()' Funktion ist auf nichts beschränkt. Die * Referenz * der Funktion wird nur dem Handler zur Verfügung gestellt. Daher können Sie nicht darauf zugreifen. –

+0

Ich habe es funktioniert in [jsfiddle] (https://jsfiddle.net/omgtoblerone/d375u2d2/) –

+0

@ JonathanBrooks, die nicht 'f1()' von irgendwo außerhalb der Click-Handler obwohl, was der OPs Punkt ist. –

Antwort

0

Aufruf einer Funktion zu einem JQuery-Handler übergeben

Sie jQuery._data() verwenden können, um Zugriff auf und rufen Sie die event Handler von click, f1, außerhalb von .click()

function test() { 
 
    var str = "adarsh"; 
 
    
 
    // f1(); - This gives an error. 
 
    $("body").click(function f1() { 
 
    console.log(str); 
 
    }); 
 

 
    var ref = $._data(document.body, "events")["click"][0]; 
 
    
 
    console.log(ref.handler, ref.handler.name); 
 

 
    ref.handler() 
 
} 
 

 
test();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body>click</body>

+1

Das funktioniert !!! Ich weiß nicht, warum es abgelehnt wurde. –

3

Worauf ist die Funktion 'f1' beschränkt?

Es ist nicht auf etwas beschränkt. Die Referenz der Funktion wird nur dem Handler zur Verfügung gestellt, so dass nichts anderes definiert ist, was auf diese Funktion zeigt. Wenn Sie die Funktion definieren möchten, so dass es an mehreren Stellen aufgerufen werden würden Sie Ihre Logik zu so etwas wie dies ändern müssen:

function test() { 
    var str = 'adarsh'; 
    $('body').click(function() { // < note the anonymous function here 
     f1(str); 
    }); 
} 

function f1(str) { 
    console.log(str); 
} 

test(); 
f1('foo bar'); 
4

Die BindingIdentifier in einem FunctionExpression kann aus dem Inneren des FunctionBody des FunctionExpression referenziert werden damit die Funktion sich selbst rekursiv aufrufen kann. Anders als in einer FunctionDeclaration kann der BindingIdentifier in einer FunctionExpression jedoch nicht von dem Bereich referenziert werden, der den FunctionExpression umschließt. @@http://www.ecma-international.org/ecma-262/6.0/#sec-function-definitions-runtime-semantics-evaluation

Mit anderen Worten, wenn Sie eine Funktion Ausdruck haben wie function someName() {...} der Name innerhalb der Funktion, nicht in dem Umfang enthalten, gebunden ist (nicht mit einer Funktion Erklärung zu verwechseln).

fun = function someName() { 
 
    
 
    alert(someName); // works 
 
    
 
}; 
 

 
alert(typeof someName); // doesn't work 
 

 
fun();

Der Zweck Namen geben Ausdrücke zu funktionieren sinnvoll Stack-Traces haben.

+0

Sie könnten in das Code-Snippet eine einfache 'Funktionsdeklaration' einfügen, um den Unterschied zu sehen ein 'benannter Funktionsausdruck'. –

5

Eine Funktionsdeklaration wird:

  • Erstellen Sie eine Variable mit dem gleichen Namen wie die Funktion in dem aktuellen Bereich.

Eine benannte Funktion Ausdruck wird (das, was Sie hier haben, ist):

eine variable
  • erstellen mit dem gleichen Namen wie die Funktion in den Anwendungsbereich dieser Funktion (die rekursiv für den Aufruf selbst nützlich ist).
  • auswerten wie die Funktion

So gibt es zwei Möglichkeiten, wie Sie die Funktion zugreifen können Sie mit dem benannten Funktion Ausdruck erstellt:

  • etwas auf der linken Seite des Ausdrucks Setzen. In diesem Fall, dass Sie bereits tun, dass es zu click() vorbei, so dass die click Funktion etwas mit ihm
  • Nennen Sie es von innen selbst namentlich tun können

Es gibt keine weiteren Verweise darauf im Rahmen der test.

Ich möchte jedoch wissen, was ist der Punkt der Bezeichnung "anonymer" Funktionen in solchen Kontexten, wenn wir nicht überall über diesen Namen darauf zugreifen können.

Wie gesagt, die Variable ist nützlich, um sie rekursiv aufzurufen.

Der Name (der sich von der Variablen unterscheidet) ist auch nützlich, da er in Debuggern angezeigt wird. Es ist viel einfacher, mit einem Stacktrace zu arbeiten, der aus einem Dutzend nützlicher Namen besteht als einer, der nur ein Dutzend Wiederholungen von (anonymous function) ist.

Verwandte Themen