Website-Suche

javascript - bind-Funktion und this in TypeScript


Ich wollte eine einfache Kontextbindung implementieren, aber sie funktioniert in TypeScript nicht. Hier ist mein Stück Code:

class Engine {
    // some code...

    spriteController(sprite: Sprite, callbackfn: (ctx: CanvasRenderingContext2D) => void) {
        callbackfn.bind(new SpriteController(sprite), [this._ctx]);
    }

    // code again ...
}

Wenn ich die Methode spriteController in einer anderen Datei so verwenden möchte:

engine.spriteController(sprite, function(ctx) {
    this.moveRight() // access to the spriteController class
})

Ich möchte die SpriteController-Klasse innerhalb des Callbacks verwenden können.
In JS wird das erste Argument (innerhalb des bind()-Aufrufs) verwendet, um 'this' an das angegebene Objekt zu binden. Aber in TypeScript bewahren Funktionen, die mit function.bind erstellt wurden, immer 'this'.
Wie kann man dies in TypeScript erreichen?

Antwort #1

Beim Binden wird die gebundene Funktion zurückgegeben, Sie müssen Ihre Variable aktualisieren: callbackfn=callbackfn.bind(...):

Dokumentationslink

class Engine {
    spriteController(sprite: Sprite, callbackfn: (ctx: CanvasRenderingContext2D) => void) {
        let callbackfnBinded = callbackfn.bind(new SpriteController(sprite), [this._ctx])
        callbackfnBinded()
    }
}

JavaScript hier:

var Sprite = (function () {
    function Sprite(name) {
        this.name = name;
    }
    return Sprite;
})();
var SpriteController = (function () {
    function SpriteController(sprite) {
        this.sprite = sprite;
    }
    return SpriteController;
})();
var Engine = (function () {
    function Engine() {
    }
    Engine.prototype.spriteController = function (sprite, callbackfn) {
        callbackfn = callbackfn.bind(new SpriteController(sprite), [this._ctx])
        callbackfn()
    };
    return Engine;
})();
var e = new Engine();
var s = new Sprite("test");
var cb = function (ctx) {
    alert(this.sprite.name);
};
e.spriteController(s, cb);

Verwandte Artikel