Object-oriented Javascript: event-handling

Ich versuche, erstellen Sie ein Ereignis für ein Objekt, um es zu hören. Betrachten Sie das folgende Beispiel: 

var moon;

moon = document.createEvent("Event");
moon.initEvent("Event",true,true);

var Dog = function (name) {
  this.name = name;

  document.addEventListener("Event",this.bark,false);
};
dog.prototype.bark = function() {
  console.log(this.name + ': Awooooooof Woof!');
};


var spot = new Dog("Spot");
var dot = new Dog("Dot");


//invoke
document.dispatchEvent(moon);

Ich erwarte, um zu erhalten eine Ausgabe wie:

Spot: Awooooooof Woof!

Dot: Awooooooof Woof!

Aber was ich bekomme ist:

undefined: Awooooooof Woof!

Was falsch ist mit meinem Beispiel? Wie kann ich einen listener registrieren, dass jede Instanz der Hund hat?
Vielen Dank im Voraus!

InformationsquelleAutor Alessandro Cappello | 2013-03-12
  1. 10

    In dieser Zeile

    document.addEventListener("Event",this.bark,false);

    Sie nicht binden den Umfang der this.bark zu this. In JavaScript, die den Wert this hängt nicht davon ab, wo die Funktion definiert ist, aber von wo es aufgerufen wird. Dies bedeutet, wenn Sie pass this.bark zu addEventListener trennen Sie es von der aktuellen Objekt.

    In frameworks wie prototype.js und JQuery gibt es shortcuts für die Bindung this mit vanilla-JavaScript-Sie können es so machen:

    function bind(scope, fn) {
   return function() {
      return fn.apply(scope, arguments);
   }
}

    Dann:

    document.addEventListener("Event",bind(this, this.bark),false);
    • Ich danke Ihnen sehr! Ich habe herausgefunden, wie Sie es erreichen, mit der jQuery, aber ich denke, deine Lösung ist eleganter.
    InformationsquelleAutor Fabian Schmengler
  2. 4

    Das problem, das Sie haben, ist, dass this innerhalb der Funktion bezieht sich nicht auf das Objekt, das Sie manipulieren wollen.

    Wie über das hinzufügen der Funktion bark innerhalb der definition einer Funktion?

    var Dog = function (name) {
    this.name = name;    
    this.bark = function() {
        console.log(name + ': Awooooooof Woof!');
    };
    document.addEventListener("Event", this.bark, false);
};
    InformationsquelleAutor Mikael Östberg
  3. 0

    Das Problem

    Den this Schlüsselwort, innen Dog.prototype.bark() Punkte auf das Objekt, das aufgerufen wird, die Methode. Zum Beispiel, wenn spot.bark() genannt wird, this.name ausgewertet spot.name etwa so:

    Dog.prototype.bark = function () {
    console.log(spot.name + ': Awooooooof Woof!');
};

    Wenn der Ereignis-listener Hinzugefügt, der im inneren des Hundes Konstruktor, der document Objekt wird gesagt, um einen Listener für dieses Ereignis, und sagte zu nennen Dog.prototype.bark() wenn es hört, dass event. Dieses setup richtig gemacht, und die document - Objekt rufen Sie die korrekte Funktion, wenn er hört, dass Ereignis,

    Den ärger passiert später, wenn die document Objekt tatsächlich ruft die Rinde-Funktion. Jetzt this Punkte der document Objekt, und this.name ausgewertet document.name etwa so:

    Dog.prototype.bark = function () {
    console.log(document.name + ': Awooooooof Woof!');
};

    document.name es nicht gibt und das ist der Grund, warum die Ausgabe: undefined: Awooooooof Woof!

    Das Update

    Verwenden Funktion.der Prototyp.bind() zu binden, die angegebenen Werte zu einer Funktion this Schlüsselwort, etwa so:

    document.addEventListener("Moon", this.bark.bind(this), false);
    InformationsquelleAutor Nocturno
Schreibe einen Kommentar