javascript - función bind y this en typescript
Quería implementar una vinculación de contexto simple, pero no funciona en TypeScript. Aquí está mi fragmento de código:
class Engine {
// some code...
spriteController(sprite: Sprite, callbackfn: (ctx: CanvasRenderingContext2D) => void) {
callbackfn.bind(new SpriteController(sprite), [this._ctx]);
}
// code again ...
}
Si quiero usar el método spriteController en otro archivo así:
engine.spriteController(sprite, function(ctx) {
this.moveRight() // access to the spriteController class
})
Quiero poder usar la clase SpriteController dentro del callback.
En JS, el primer argumento (dentro de la llamada a bind()) enlaza 'this' al objeto dado. Pero en TypeScript, las funciones creadas a partir de function.bind siempre preservan 'this'.
¿Cómo lograr esto en TypeScript?
Respuesta #1
Al hacer el binding, está devolviendo la función enlazada, tienes que actualizar tu variable con callbackfn=callbackfn.bind(...):
Enlace de documentación
class Engine {
spriteController(sprite: Sprite, callbackfn: (ctx: CanvasRenderingContext2D) => void) {
let callbackfnBinded = callbackfn.bind(new SpriteController(sprite), [this._ctx])
callbackfnBinded()
}
}
JavaScript aquí:
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);