Ralf: jQuery: this und $(this)

Beitrag lesen

Hi,

"this is the DOM object, whereas $(this) is the jQuery wrapper around same.

Das gilt für Event-Handler, aber das lässt sich nicht verallgemeinern. Was this bedeutet, hängt in JavaScript immer von der Aufrufweise der Funktion.

$.fn.showLinkLocation = function() {

this.filter( "a" ).each(function() {
       var link = $( this );
       link.append( " (" + link.attr( "href" ) + ")" );
     });

return this;
   };

  
jQuery-Plugins sind neue Methoden von jQuery.prototype. $.fn ist nur eine Abkürzung für jQuery.prototype. Man fügt somit dem Prototyp neue Methoden hinzu:  
  
~~~javascript
jQuery.prototype.meineMethode = function() {  
  console.log('meineMethode', this);  
};

Gehen wir von einem jQuery-Objekt aus:

var jQueryObjekt = $('.foo');

Intern wird new jQuery() aufgerufen, also ein Objekt erzeugt, das von jQuery.prototype erbt.

jQueryObjekt.meineMethode();

Das ruft die Plugin-Funktion auf.

In Objektmethoden verweist "this" auf die Instanz, sofern sie mit objekt.methode() aufgerufen wird. Die Instanz ist hier ein jQuery-Objekt. Ergo zeigt this auf das jQuery-Objekt.

Daher kannst du direkt this.filter() aufrufen, und alle anderen jQuery-Methoden, die es so gibt. Es ist an dieser Stelle kein weiteres $(this) nötig.

Das ist übrigens keine jQuery-Eigenheit, sondern so funktioniert Objektorientierung in JavaScript.

filter("a") ist doch eine jQuery-Methode, oder?

Ja.

Wieso dann this und nicht $(this).

Weil this hier schon das jQuery-Objekt ist, kein DOM-Element.

Das (erste) DOM-Element wäre über this[0] oder this.get(0) zugänglich.

Ebenso verstehe ich nicht, warum man this zurückgibt und nicht $(this).

Das sollte dir nun einleuchten: Damit Chaining möglich ist. Eine jQuery-Methode, die keinen sinnvolleren Rückgabewert hat, gibt wieder das jQuery-Objekt zurück, damit weitere Methodenaufrufe möglich sind. Also hier einfach return this.

Ralf