Javascript und this!

Moin!

Bin bisschen verwirrt ich versuche mich etwas in Javascript einzuarbeiten und habe jetzt nen Tutorial gefunden wie man Klassen machen kann. http://www.phpied.com/3-ways-to-defi...ascript-class/
Vorweg ich kann schon einigermaßen programmieren, was mich hier allerdings verwirrt ist das "this" in der Funktion.

Folgender Code:

function Apple (type) {
this.type = type;
this.color = "red";
this.getInfo = getAppleInfo;
}

// anti-pattern! keep reading...
function getAppleInfo() {
return this.color + ' ' + this.type + ' apple';
}

Jetzt die Funktion getAppleInfo. Ich könnte die theoretisch ja auch so benutzen unabhängig von der Klasse (es geht jetzt nichtmal um das Klassen Zeug), aber wenn ich die Funktion so benutzen würde was wäre dann this?
Das verwirrt mich etwas es gibt keine klare ersichtliche Zuordnung zwischen this und einer taschlichen Klasse. So gesehen gibts ja nichtmal eine Klasse.

Ich hab wenig Ahnung von Javascript, aber bin mir im klaren, dass es sowas wie typen da nicht so ist bzw, das alles nicht so stren gehandhabt wird aber das hier verwirrt mich gerade total..
Kann mir das wer bitte erklären was das soll/da passiert? :)

Gruß
ftb

Zitat:

---

Zitat von ftb

Jetzt die Funktion getAppleInfo. Ich könnte die theoretisch ja auch so benutzen unabhängig von der Klasse (es geht jetzt nichtmal um das Klassen Zeug), aber wenn ich die Funktion so benutzen würde was wäre dann this?

---

Was this macht lässt sich recht einfach am Code erklären:

Code:

---

function Apple (type) {
this.type = type;
}

---

Da wird ja type 2 mal genutzt, einmal als this.type als Variable der Klasse und einmal als Parameter type der Funktion Apple.
this ist nun da um zu trennen was nun gemeint ist, denn this.type und type sind 2 verschiedene Variablen und müssen nicht das gleiche enthalten.

Wenn du die Funktion getAppleInfo von außen ohne Objekt aufrufst, wird das Skript höchstwahrscheinlich einen Laufzeit-Fehler erzeugen, weil this ja dann "null" ist (ins digitale Nirgendwo zeigt).
Es ist da schöner, wenn man getAppleInfo in function Apple rein macht (im Tutorial dann 1.1.), damit keiner von außen Blödsinn mit machen kann, außer man will die Funktion bei anderen Klassen-Deklarationen wiederverwenden (da am besten als Kommentar vorher zu sagen, dass man da ein Objekt braucht).

Ich bin mir recht sicher, dass alle Funktionen, die du sozusagen „global“ machst, am window-Objekt definiert werden. Also wenn du sie so aufrufst, ist this einfach gleich window.
(Also falls man annehmen darf, dass du das in einem Browser laufen lassen willst.)

Ich kann da übrigens den TryIt-Editor des W3C recht empfehlen, da kann man sowas auch einfach mal schnell nachprüfen. (Oder man nimmt in seinem eigenen Skript einfach ein alert() zur Hand.)

Zitat:

---

Zitat von drunken monkey

(Oder man nimmt in seinem eigenen Skript einfach ein alert() zur Hand.)

---

console.log () wäre aber angenehmer zum Debuggen. Das wirft den Inhalt dann in eine JavaScript-Konsole deiner Wahl (wie etwa Firebug), anstatt die Funktionalität deiner Website mit einer nervigen Prompt einzuschränken.

Okey danke das erklärt einiges. dass alle globalen methoden im window objekt liegen kann man ja mal nachprüfen.
edit: oke wenn man alert(this) in ner globalen Funktion macht kommt object Window raus.

this ist eine Referenz auf das Objekt, in dessen Kontext die Methode aufgerufen wurde.

Angenommen der folgende Code wird im globalen Geltungsbereich definiert:

Code:

---

var bar = "global bar";

function getBar() {
  return this.bar;
}

---

Im folgenden Code wird nun getBar() im Kontext des globalen Objekts aufgerufen, d.h. this ist eine Referenz auf das globale Objekt:

Code:

---

var result = getBar(); // result enthält nun den String "global bar"

---

Im folgenden Code wird nun getBar() im Kontext des Objekts foo aufgerufen (mit Hilfe des Punkt-Operators), insofern ist this eine Referenz auf foo:

Code:

---

function Foo() {
  this.bar = "foo's bar";
}

Foo.prototype.getBar = getBar; // Vererbung in JavaScript wird in der Regel mit Hilfe der prototype-Kette realisiert

var foo = new Foo();

var result = foo.getBar(); // result enthält nun den String "foo's bar"

---

Es ist allerdings möglich eine Methode mit einem fest definierten this aufzurufen:

Code:

---

var result = foo.getBar.call(this); // result enthält nun den String "global bar", da getBar() mit dem globalen Objekt als this aufgerufen wurde

---

Es ist auch möglich Methoden fest an ein this zu binden, d.h. egal mit welchem Objekt als this die Methode aufgerufen wird, es wird immer das vorher definierte this für den Aufruf genommen:

Code:

---

Foo.prototype.getBar = getBar.bind(this); // Foos getBar() wird nun immer im Kontext des globalen Objekts aufgerufen

var foo = new Foo();

var result = foo.getBar(); // result enthält nun den String "global bar"

---

Näheres zu call() und bind(): https://developer.mozilla.org/en/Jav...tion#Methods_2

Warum lange drüber reden, wenn man testen kann?
http://jsfiddle.net/AQ5BU/ (führende Meeresbiologen empfehlen eine offene Browserkonsole um die Ausgabe zu sehen!)

Kyuu hat damit drunken monkeys Vermutung bestätigt, dass das globale this das window-object darstellt. call() und bind() kannte ich bislang aber noch nicht, danke dafür :o)

Zu dem Code Beispiel von Kyuu will ich noch kurz etwas ergänzen:

Bei dem folgenden Beispiel wird "global bar" ausgegeben:

Code:

---

var bar = "global bar";

function getBar() {
  return this.bar;
}

alert(getBar())

---

Mich persönlich hat das verwirrt, da ich nicht gedacht habe, dass sogar eine var declaration das window objekt erweitert.
Dies passiert allerdings wirklich nur im global scope.

Bei diesem Beispiel wiederum wird "undefined" ausgegeben:

Code:

---

(function(){
    var bar = "global bar";

    function getBar() {
      return this.bar;
    }

    alert(getBar())
})();

---

Im Prinzip wird hier eine annonyme Funktion aufgerufen, die den selben Code ausführt, allerdings nicht im global scope.
Was hier funktioniert, wäre folgendes:

Code:

---

(function(){
    var bar = "global bar";

    function getBar() {
      return bar;
    }

    alert(getBar())
})();

---

Btw, hier noch ein ganz nettes Video zu JavaScript, das viele Eigenarten der Sprache erklärt. Ist aber auf Englisch und ziemlich lang:

https://www.youtube.com/watch?v=seX7...ayer_embedded#!