Webdesign, Tutorials und mehr - Webmasterpro.de

What is this? - OOP in Javascript zähmen

Das Schlüsselwort this wird in vielen Programmiersprachen verwendet und hat nicht immer die gleiche Bedeutung und Eigenschaften. Ausgehend von der Sprache kann das z.B. ein Verweis auf die aktuelle Instanz einer Klasse sein oder ein Konstrukt um die Methoden und Attribute oberer Klasse zu erreichen.

In JavaScript hat this ein paar ziemlich verwirrender Bedeutungen und Eigenschaften, die sich von anderen Programmiersprachen unterscheidet.

Ausgehend vom Kontext, in dem this benutzt wird, hat this in JavaScript verschiedene Bedeutungen.

Globaler Kontext

Im globalen Kontext verweist this auf den globalen window-Objekt vom Browser:

1

alert(this); //window

Funktionskontext

Hier hängt die Bedeutung von this davon ab, wie eine Methode aufgerufen wird. Das bedeutet, welchem Objekt eine Funktion beim Aufruf zugewiesen war.

a. Zugriff auf Objekteigenschaften:

this liefert den Verweis auf das Objekt:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

var foo = {
    bar: function() {
        return this;
    }
}

// direkter Aufruf der Funktion liefert das Objekt selbst
foo.bar(); //foo

var test = {
    bar: foo.bar
}

// Ruft man dieselbe Funktion über ein anderes Objekt auf, so wechselt der Kontext und damit this
test.bar() // test

b. Zugriff auf Objektvariablen:

this gibt das globale Objekt zurück:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

var foo = {
    bar: function() {
        return this;
    }
}

// die neue Zuweisung der Funktion b ändert den Rückgabewert der Funktion
var c = foo.bar

// c Verweist auf das globale window-Objekt
c(): //window

c. Instantiierung eines Objekts

this ist das gerade erstellte Objekt:

1
2
3
4
5
6
7
8

var Foo = function(){
    this.foo = function(){
        return "bar";
    }
}

var foo = new Foo();
foo.foo(); //'bar'

d. Aufruf der call()-Funktion oder apply()-Funktion

this lässt sich für Funktinsaufrufe aber auch explizit setzen. this ist das der call()- oder apply()-Funktion als Parameter übergebene Objekt:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

var foo = {
    bar: 10,
    fkt: function(add){
        alert(this.bar + add);
    }
}

foo.fkt(5); // gibt 15 aus
var someObj = { bar: 20 };
foo.fkt.call(someObj, 5); // gibt 25 aus
foo.fkt.apply(someObj, [5]); // gibt 25 aus

call()/apply() unterscheiden sich nur durch die Art, wie die Parameter übergeben werden. Während call() die Parameter 2 bis n an die zugrundeliegende Funktion durchreicht verwendet apply() den übergebenen Array. apply() eignet sich damit hervorragend um beliebige Parameter zu übergeben, auch in Kombination mit der arguments-Variable.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

function bind(func, context) {
    return (function() {
        return func.apply(context, arguments);
    });
}

// siehe obiges Beispiel
var bound = bind(foo.fkt, someObj);
bound(5) // gibt 25 aus, da bound immer someObj als this sieht

var test = {
    bar: 100,
    fkt: bound
}
test.fkt(); // gibt 25 aus, this wurde durch bind() vorgegeben, test ist irrelevant

this und Event-Handling

Beim Event-Hahdling ist this das aktuelle Element, für den das Event ausgelöst wurde:

1

<a href="#" onclick="alert(this.text);">Click me</a>

Hier ist this das <a>-Element

this in jQuery

In jQuery wird this meist gebraucht, um bei Callbacks (z.B. Event Handler) auf das aktuelle Objekt zuzugreifen:

1
2
3

$("a").click(function(){
    $(this).text(); // enthält den inneren Text vom gerade geklickten Link
});

Allerdings kann this reines JavaScriptes auch hier verwendet werden. Man muss das aber zuerst mit bind()-Funktion einbinden:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

var Foo = {
    bla: 'blub',

    bar: function() {
        $("a").click(bind(function(e){
            alert($(e.currentTarget).text()); //gibt den inneren Text des geklickten links aus
            alert(this.bla); //gibt "blub" aus
        }), this)):
    }
}

Zu beachten ist, dass bei Verschachtelung von Funktionen this für jede Unterfunktion eingebunden werden muss. Auch der Konstrukt $(this) weist nicht mehr das standardmäßige Verhalten auf, sondern muss jetzt für den Zugriff auf das geklickte <a> ersetzt werden ($(e.currentTarget)).

bind() kann auch an die Funktion gebunden werden über die in Javascript üblichen Prototypen. Hier wird die Geschichte mit this dann kompliziert, da this im funktionseigenen bind() auf einmal die Funktion selbst repräsentiert.

1
2
3

Function.prototype.bind = funtion(context) {
    return bind(this, context);
}

Kommentare: What is this? - OOP in Javascript zähmen