javascript - 在 typescript 中綁定函數和 this
我想實現一個簡單的上下文綁定,但在 TypeScript 中無法運作。這是我的一段程式碼:
class Engine {
// some code...
spriteController(sprite: Sprite, callbackfn: (ctx: CanvasRenderingContext2D) => void) {
callbackfn.bind(new SpriteController(sprite), [this._ctx]);
}
// code again ...
}
如果我想在另一個檔案中像這樣使用 spriteController 方法:
engine.spriteController(sprite, function(ctx) {
this.moveRight() // access to the spriteController class
})
我希望能在回呼函式中使用 SpriteController 類別。
在 JS 中,第一個參數(在 bind() 呼叫中)會將 'this' 綁定到給定的物件。但在 TypeScript 中,由 function.bind 創建的函式總是保留 'this'。
如何在 TypeScript 中達成這個功能?
答案#1
在綁定時,它會返回綁定後的函數,你必須更新你的變數 width callbackfn=callbackfn.bind(...):
文件連結
class Engine {
spriteController(sprite: Sprite, callbackfn: (ctx: CanvasRenderingContext2D) => void) {
let callbackfnBinded = callbackfn.bind(new SpriteController(sprite), [this._ctx])
callbackfnBinded()
}
}
JavaScript 在這裡:
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);