Javascript - Memberfunktion als Callback

[Borislav B. (boris_b)]

Hi,
ich würde gerne eine Memberfunktion der Klasse A an eine andere Klasse 
übergeben. Wenn die dann aber das Callback aufrufen soll, gibt es eine 
Exception:

TypeError: this.dataUpdateCallback is not a function

Hier ist der Code:

// Class A
module.exports = function MyTestClass() {

    // Member variables
    this.service = null;

    // Starts the service
    this.start = function() {
        this.service = new MyCoolService(this.processNewData);
        this.service.start();
    }

    // Processes incoming data
    this.processNewData = function(data) {
        console.log(data);
    }
}

// Class B
module.exports = function MyCoolService(aDataUpdateCallback) {

    // Member variables
    this.dataUpdateCallback = aDataUpdateCallback;

    // Starts the service
    this.start = function() {
        // Do stuff, then call...
        this.dataUpdateCallback("Hello World!"); // => TypeError: this.dataUpdateCallback is not a function
    }
}

Hat jemand eine Idee, was ich da falsch mache?

[Carl D. (jcw2)]

this in einem function Objekt zeigt natürlich auf dieses und nicht auf 
das Objekt, aus dem heraus die Funktion erzeugt wurde.
Versuch mal mit

var cbobj = this;
 ..... function() { cbobj.memberFunc(); }

Damit sollte die richtige Referenz benutzt werden.

[Borislav B. (boris_b)]

Öhm, ich steh gerade auf dem Schlauch...
Wo soll der this pointer gespeichert/verwendet werden?

[Torsten R. (Firma: Torrox.de) (torstenrobitzki)]

Boris P. schrieb:
>     this.start = function() {
>         // Do stuff, then call...
>         this.dataUpdateCallback("Hello World!"); // => TypeError:
> this.dataUpdateCallback is not a function

Das this ist ein anderes, als das ausserhalb der function(). Daher musst 
Du den äusseren this-Zeiger an die Funktion weiter reichen. Entweder wie 
Carl vorschlägt, als Variable im scope, oder z.B. als Parameter:

    // Starts the service
    this.start = function(that) {
        return function() {
            // Do stuff, then call...
            that.dataUpdateCallback("Hello World!");
        };
    }(this);

HTH
Torsten

[Roland P. (pram)]

Hast du irgend ein Framework am Laufen?  In dojo macht man das z. B so 
https://dojotoolkit.org/reference-guide/1.7/dojo/hitch.html

Gruß Roland

[Borislav B. (boris_b)]

Danke so weit!

Aber müsste ich dazu nicht wissen, dass "that" eine Funktion 
"dataUpdateCallback" hat? Das ist ja nicht unbedingt der Fall.
Klasse A könnte ja eine beliebige Funktion als callback übergeben haben.

[Torsten R. (Firma: Torrox.de) (torstenrobitzki)]

Boris P. schrieb:
> Danke so weit!
>
> Aber müsste ich dazu nicht wissen, dass "that" eine Funktion
> "dataUpdateCallback" hat? Das ist ja nicht unbedingt der Fall.
> Klasse A könnte ja eine beliebige Funktion als callback übergeben haben.

Äh??? Ich zitiere das Beispiel noch mal etwas großräumiger:

    // Member variables
    this.dataUpdateCallback = aDataUpdateCallback;

    // Starts the service
    this.start = function(that) {
        return function() {
            // Do stuff, then call...
            this.dataUpdateCallback("Hello World!");
        }
    }(this); // this == that

this.start wird initialisiert mit dem Funktionsaufruf 
function(that){...}(this). Diese Funktion liefert eine Funktion, die 
keine Parameter mehr nimmt, den this Zeiger aber über den benamten 
Parameter that gespeichert hat.

An der Stelle, an der function(that) aufgerufen wird, hat this doch 
einen member dataUpdateCallback (den hast Du doch selbst da eingeführt). 
Und eben dieses, äußere this wird als Funktionsargument an die Funktion, 
die die Funktion zurück liefert übergeben. Jede Funktion in JavaScript 
macht einen eigenen Scope auf (this beziehen sich dann immer auf die 
lokale Funktion) und kann auf den übergeordneten Scope zugreifen 
(closure).

Vielleicht wird es so deutlicher:

    // Member variables
    this.dataUpdateCallback = aDataUpdateCallback;

    // creates start function
    var start_factory = function(that) {
        return function() {
            // Do stuff, then call...
            this.dataUpdateCallback("Hello World!");
        }
    };

    // Starts the service
    this.start = start_factory(this);

[D. I. (Gast)]

An dieser Stelle würde ich mal folgendes einwerfen:

CoffeeScript for the win :)

[Torsten R. (Firma: Torrox.de) (torstenrobitzki)]

D. I. schrieb:
> CoffeeScript for the win :)

Ja, auf jeden Fall das bessere JS: http://coffeescript.org

:-)

[Borislav B. (boris_b)]

Hui, es funktioniert :-)
Als C-Denker muss man sich da ganz schön das Hirn verrenken...

Danke für die Hilfe!

[Torsten R. (Firma: Torrox.de) (torstenrobitzki)]

Boris P. schrieb:
> Hui, es funktioniert :-)
> Als C-Denker muss man sich da ganz schön das Hirn verrenken...

Ja, JavaScript ist nix für schwache Nerven! ;-)

[Borislav B. (boris_b)]

Kommando zurück, nix geht ^^
Der Callback wird gemacht, landet aber ganz wo anders!? Die Daten 
verschwinden jedenfalls im Nirwana, und landen nicht im Objekt, das den 
Service gestartet hat...

Hier mal der echte Code, so wie er nach euren Vorschlägen aussieht:

// Includes
var http = require('http');
var request = require('request');

// This class retrieves data from a web service
module.exports = function WebServiceAdapter(aUrl, aUpdateCycleTimeM, aDataUpdateCallback) {
  
  // Member variables
  this.url = aUrl;
  this.updateCycleTimeM = aUpdateCycleTimeM;
  this.dataUpdateCallback = aDataUpdateCallback;

  // Starts an immediate update, then runs cyclic updates
  this.start = function(that) {
    this.triggerUpdate(that);
    setInterval(function(){ this.triggerUpdate(that); }, this.updateCycleTimeM*60*1000);
  }
  
  // Performs the actual web request
  this.triggerUpdate = function(that) {
    return function() {
            try {
          // The callback function takes 3 parameters, an error, response status code and the html
          request(this.url, function(err, response, html) {
              if(err)
                console.log(err);
              else {
                //console.log(html);
                this.dataUpdateCallback(html);
              }
          });
      }
      catch(err) {
        console.log(err);
      }
        }
  }(this);
}

Aufgerufen wird er so:

this.start = function() {
    this.service = new WebServiceAdapter("some url", 5, this.processNewData);
    this.service.start(this);
  }

Vielleicht sollte ich mir doch mal Coffee Script ansehen? ;-)

[Torsten R. (Firma: Torrox.de) (torstenrobitzki)]

Du musst innerhalb von this.triggerUpdate() `this` durch `that` 
ersetzen. Dass this innerhalb von this.triggerUpdate() ist nicht 
dasselbe this, dass die Funktion triggerUpdate() enthält.

Und noch einmal: Jede Funktion in JavaScript hat ihren eigenen this 
pointer.

Coffeescript ändert daran leider auch nix. coffeescript ist meiner 
Meinung nach aber deutlich besser lesbar.

[Borislav B. (boris_b)]

Torsten R. schrieb:
> Du musst innerhalb von this.triggerUpdate() `this` durch `that`
> ersetzen. Dass this innerhalb von this.triggerUpdate() ist nicht
> dasselbe this, dass die Funktion triggerUpdate() enthält.
>
> Und noch einmal: Jede Funktion in JavaScript hat ihren eigenen this
> pointer.

OK, ich glaube ich habe es verstanden :-)
Ich gebe den this-Pointer rein, und verwende ihn in der Funktion unter 
dem Namen that, weil this dort eine andere Bedeutung hat, richtig?

Leider funktioniert es aber immer noch nicht (argh!?):

// Includes
var http = require('http');
var request = require('request');

// This class retrieves data from a web service
module.exports = function WebServiceAdapter(aUrl, aUpdateCycleTimeM, aDataUpdateCallback) {
  
  // Member variables
  this.url = aUrl;
  this.updateCycleTimeM = aUpdateCycleTimeM;
  this.dataUpdateCallback = aDataUpdateCallback;

  // Starts an immediate update, then runs cyclic updates
  this.start = function() {
    this.triggerUpdate(this);
    setInterval(function(){ this.triggerUpdate(this); }, this.updateCycleTimeM*60*1000);
  }
  
  // Performs the actual web request
  this.triggerUpdate = function(that) {
    return function() {
            try {
          // The callback function takes 3 parameters, an error, response status code and the html
          request(that.url, function(err, response, html) {
              if(err)
                console.log(err);
              else {
                //console.log(html);
                that.dataUpdateCallback(html);
              }
          });
      }
      catch(err) {
        console.log(err);
      }
        }
  }(this);
}

[Torsten R. (Firma: Torrox.de) (torstenrobitzki)]

Boris P. schrieb:

> OK, ich glaube ich habe es verstanden :-)

Mal sehen:


>   this.start = function() {
>     this.triggerUpdate(this);
      ^^^ hier wird dieses this zum ersten mal benutzt, woher sollte 
triggerUpdate hier kommen?
>     setInterval(function(){ this.triggerUpdate(this); },
                              ^^^^ neue Funktion, neues this

Noch mal! ;-)

[D. I. (Gast)]

Torsten R. schrieb:
> Coffeescript ändert daran leider auch nix. coffeescript ist meiner
> Meinung nach aber deutlich besser lesbar.

Eben, ein => tippt sich halt bedeutend schneller und liest sich besser.

[Borislav B. (boris_b)]

So, jetzt funktioniert's wirklich :-)

Das Arbeiten mit Klassen ist aber echt ein Krampf in javaScript :-/
TypeScript scheint nach dem, was ich gerade lese, da um einiges 
"freundlicher" zu sein. Da gibt es scheinbar auch die this/that 
Problematik nicht...

Meinungen dazu?

[Carl D. (jcw2)]

Das ganze nennt sich "closure" 
https://developer.mozilla.org/de/docs/Web/JavaScript/Closures
wenn eine anonyme Funktion via function(){...} erzeugt wird, dann hat 
sie Zugriff auf Variablen im aktuellen Scope. Das geht bei JavaScript 
nur deshalb, weil jede "Variable" eigentlich nur eine Referenz auf eine 
solche ist, die irgendwo auf dem Heap liegt. Zu dem Funktionobject 
werden auch die Referenzen auf Variablen außerhalb der Funktion 
dazugepackt. Und selbst wenn eine "var" lokal definiert war, bleibt das 
Objekt, auf das die lokale "var" Referenz zeigt erhalten, selbst wenn 
man den Scope verlässt. Denn im Funktions-Objekt existiert ja noch eine 
Referenz. Nur bei this Funktioniert das nicht, denn this im 
Funktions-Objekt ist immer das Objekt selbst. Wenn man aber das 
"äußeren" this unter neuem Namen ablegt, dann klappt es:

// Class A
module.exports = function MyTestClass() {

    // Member variables
    this.service = null;

    // Starts the service
    this.start = function() {
        this.service = new MyCoolService(this.processNewData);
        this.service.start();
    }

    // Processes incoming data
    this.processNewData = function(data) {
        console.log(data);
    }
}

// Class B
module.exports = function MyCoolService(aDataUpdateCallback) {

    // Member variables
    this.dataUpdateCallback = aDataUpdateCallback;

    var me = this; // "rename" this

    // Starts the service
    this.start = function() {

        // Do stuff, then call using the MyCoolService object
        me.dataUpdateCallback("Hello World");
    }
}

[Daniel A. (daniel-a)]

Boris P. schrieb:
> Das Arbeiten mit Klassen ist aber echt ein Krampf in javaScript :-/
> TypeScript scheint nach dem, was ich gerade lese, da um einiges
> "freundlicher" zu sein. Da gibt es scheinbar auch die this/that
> Problematik nicht...

Warum sollte es dass da nicht geben? Soweit ich weiss ist ECMAScript 5 
code auch gültiger TypeScript Code. In Funktionen und Classenmethoden 
gibt es immernoch ein this und eine Allgemeingültige Referenz auf die 
Classeninstanz scheint es nicht zu geben. Ergo bleibt die 
this-Problematik erhalten.

TypeScript hat ein par nette features, aber ich denke das ist ein 
sinkendes Schiff. Seit ECMAScript 6 gibt es in JavaScript auch Klassen, 
damit sind die Typisierung und Interfaces die einzigen gründe TypeScript 
weiterzuverwenden. Ausserdem finde ich die Art und Weise wie das 
Includieren von Modulen gelöst wurde für sehr unflexiebel und 
unpraktisch. Des weiteren kann ich mir sicher sein, das ECMAScript 6 in 
den Browsern implementiert wird, und das meine Programme dann Jahrzehnte 
lang ohne grössere Anpassungen laufen werden. Bei TypeScript könnte MS 
Jederzeit die Weiterentwichlung einstellen oder Änderungen vornehmen, 
die zu Inkompatiblitäten führen. Das wurde ja mit den SilverLight und 
VB6->VB.net gezeigt.

[Borislav B. (boris_b)]

Daniel A. schrieb:
> Warum sollte es dass da nicht geben?

So wie ich das verstehe hat Typescript "echte" Instanz-Methoden. Siehe 
z.B. hier: 
http://blog.johnnyreilly.com/2014/04/typescript-instance-methods.html

[Daniel A. (daniel-a)]

Es sieht zwar sehr danach aus, aber eigentlich wird eine Membervariable 
mit einer Arrow Funktion initialisiert. Im Scope einer Arrow Function 
gibt es kein "this", deshalb wird das der darüberliegenden Funktion 
verwendet, was in dem fall der Konstruktor ist.

Zur Veranschaulichung:

class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet = () => {
    return [
      message||"?", // <- Das ist eigentlich nicht erlaubt
      this.greeting||"?",
      (()=>this.greeting||"?")(),
      (function(){return this.greeting||"?";})()
    ].join(", ");
  }
}

document.writeln(new Greeter("test").greet());

Ausgabe:

test, test, test, ?

Wie man sieht ist der Parameter "message" vom Konstruktor in der 
Funktion greet vorhanden, this ist in der Arrow Funktion immernoch 
korrekt gesetzt, aber bei einer normalen Funktion immernochnicht. Es 
währe viel sinnvoller gewesen, wenn man eine variable "self" eingeführt 
hätte, welche in jeder Memberfunktion auf die Instanz zeigt.

Ausserdem ist dies eher eine Einschränkung als ein Feature:
  Die Methode nichtmehr im Prototype der Klasse vorhanden, wodurch 
TypeScript bei einer Vererbung für diese Methode extracode erzeugen 
muss. Dies hat zur Folge, dass dinge wie 
Greeter.prototype.great.call({message:"test"}) hier nichtmehr möglich 
sind. (Ich verwende das z.B. immer, wenn ich irgendwas Arrayartiges in 
ein Array umwandeln muss 
Array.prototype.slice.call({length:3,0:1,1:4,2:10}) )

Ausserdem ist es total überflüssig, weil man genausogut derartiges tun 
kann:

class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet(){
    return "Hello "+this.greeting;
  }
}
var greeter = new Greeter("World");
var func = greeter.greet.bind(greeter);
document.writeln(func()); // Ausgabe "Hello World"

Nur als vergleich, so würde es in ECMAScript 6 aussehen:

 
class Greeter {
  constructor(message) {
    this.greeting = message;
  }
  greet(){
    return "Hello "+this.greeting;
  }
}
var greeter = new Greeter("World");
var func = greeter.greet.bind(greeter);
document.writeln(func()); // Ausgabe "Hello World"

Beinahe das selbe, und vollkommen MS Frei...