wer bin ich - JQuery, Plugin, $ this, $ (this), das Zugriff auf variable

Question

Ich habe ein Problem mit dem Objekt zu identifizieren, die die Funktion

<div id="test1">lorem</div> 
<div id="test2">ipsum</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#test1').plugin(); //alert: I am test1 
     $('#test2').plugin(); //alert: I am test2 

     $('#test1').plugin.fun(); //alert: I am undefined and I am undefined 
     $('#test2').plugin.fun(); //alert: I am undefined and I am undefined 
    }); 
    (function($) { 
     $.fn.plugin = function() { 
      $this = $(this); 
      alert('I am '+$(this).attr('id'));//<-- it works 
     } 
     $.fn.plugin.fun = function() { 
      alert('I am '+$(this).attr('id')); //<-- doesn't work! 
      alert('and I am '+$this.attr('id')); //<-- also doesn't work! 
     } 
    })(jQuery); 
</script> 

Answer 1

Die fun Funktion hat keine direkte Beziehung zu dem Objekt, das Sie in dem Aufruf verwenden, so werden this nur sein, das window Objekt.

Wenn Sie $('#test1').plugin verwenden, erhalten Sie einen Verweis auf diese Funktion, und von diesem Zugriff erhalten Sie die Funktion fun, aber was Sie erhalten, ist nur eine normale Funktion. Sie könnten auch $.fn.plugin.fun verwenden, um zur Funktion zu gelangen, die Verwendung des jQuery-Objekts mit dem Selektor hat überhaupt keine Relevanz, sobald Sie den Verweis auf die fun-Funktion erhalten haben.

Das jQuery-Objekt wird tatsächlich verworfen, bevor die fun-Funktion aufgerufen wird. Daher ist es unmöglich, es über die Funktion zu erreichen.

Answer 2

Um zu verstehen, läuft was $('#test1').plugin.fun(); tut, Wir müssen uns ansehen, wie this innerhalb von JavaScript-Funktionen gesetzt ist. Wir beginnen mit der Theorie und kehren dann zu Ihrem Plug-in zurück.

In JavaScript ist this vollständig durch definiert, wie eine Funktion heißt. Die gängigste Methode ist es, als ein Nebenprodukt zu setzen, die Funktion von einer Objekteigenschaft Aufruf:

var foo = { 
    msg: "I'm foo!", 
    bar: function() { 
     alert(this.msg); 
    } 
}; 
foo.bar(); // alerts "I'm foo!" 

Diese Linie foo.bar(); hat drei verschiedene Dinge:

1. Es ruft die bar Eigenschaft aus dem foo Objekt.
2. Es ruft die Funktion, die Eigenschaft verweist.
3. Es tut # 2 so, dass sich this auf foo bezieht.

:

So im Aufruf

$('#test1').plugin.fun(); 

... this innerhalb funplugin sein wird, weil wir fun über eine Eigenschaft auf plugin sind telefonisch unter (Mehr hier Mythical Methods.).

Sie könnten die von jQuery UI verwendeten Mechanismen verwenden, bei denen "Methoden" des Plug-Ins über eine Hauptfunktion mit den Namen als Strings verfügbar sein sollen. Zum Beispiel auf einer jQuery UI Draggable Instanz können Sie Methoden wie folgt aufrufen:

$('#test1').draggable('disable'); 

ihre Draggable documentation für weitere Beispiele sehen, aber im Grunde Ihre Anrufe würde wie folgt aussehen:

$('#test1').plugin('fun'); 

---

Mehr über Funktionsaufrufe:

Es gibt eine andere Möglichkeit, this beim Aufruf einer Funktion zu setzen: Durch die.210 und apply Funktionen auf die Funktion Beispiel:

var f = function() { 
    alert(this.msg); 
}; 
var foo = { 
    msg: "I'm foo!" 
}; 
f.call(foo); // alerts "I'm foo!" 
f.apply(foo); // alerts "I'm foo!" too 

call und apply Aufruf einer Funktion, die this Wert auf das erste Argument Einstellung, die Sie in ihnen übergeben. Der Unterschied zwischen call und apply besteht darin, wie Sie Argumente an die Zielfunktion übergeben. Mit call fügen Sie einfach weitere Argumente zur call-Funktion hinzu; Mit apply geben Sie ein Array von Argumenten als zweites Argument an apply.Beispiele:

function f(arg1, arg2) { 
    alert(this.msg + " (" + arg1 + ", " + arg2 + ")"); 
} 
var foo = { 
    msg: "I'm foo!"; 
}; 
f.call(foo, "one", "two"); // Alerts "I'm foo! (one, two)" 
//   ^-- "one" and "two" are discrete arguments 
f.apply(foo, ["one", "two"]); // Alerts the same thing 
//   ^------------^-- "one" and "two" are in an array