在jquery回调中调用时,TypeScript“this”作用域问题

在jquery回调中调用时,TypeScript“this”作用域问题

我不确定在TypeScript中处理“this”范围的最佳方法。


这是我转换为TypeScript的代码中常见模式的示例:


class DemonstrateScopingProblems {

    private status = "blah";

    public run() {

        alert(this.status);

    }

}


var thisTest = new DemonstrateScopingProblems();

// works as expected, displays "blah":

thisTest.run(); 

// doesn't work; this is scoped to be the document so this.status is undefined:

$(document).ready(thisTest.run); 

现在,我可以将呼叫改为......


$(document).ready(thisTest.run.bind(thisTest));

......确实有效。但它有点可怕。这意味着代码可以在某些情况下编译和工作正常,但如果我们忘记绑定范围,它将会中断。


我想在类中做一个方法,这样在使用类时我们不需要担心“this”的作用范围。


有什么建议?


慕妹3146593
浏览 830回答 3
3回答

千巷猫影

另一种解决方案需要一些初始设置,但是凭借其无形的光,字面上的单字语法得到回报,使用方法装饰器通过getter JIT绑定方法。我已经在GitHub上创建了一个repo来展示这个想法的实现(它有点冗长以适应其40行代码的答案,包括注释),你可以简单地使用:class DemonstrateScopingProblems {     private status = "blah";     @bound public run() {         alert(this.status);     }}我还没有在任何地方看到这个,但它完美无瑕。此外,这种方法没有明显的缺点:这个装饰器的实现 - 包括对运行时类型安全的一些类型检查 - 是微不足道和直接的,并且在初始方法调用之后基本上没有开销。关键部分是在类原型上定义以下getter,它在第一次调用之前立即执行:get: function () {     // Create bound override on object instance. This will hide the original method on the prototype, and instead yield a bound version from the     // instance itself. The original method will no longer be accessible. Inside a getter, 'this' will refer to the instance.     var instance = this;     Object.defineProperty(instance, propKey.toString(), {         value: function () {             // This is effectively a lightweight bind() that skips many (here unnecessary) checks found in native implementations.             return originalMethod.apply(instance, arguments);         }     });     // The first invocation (per instance) will return the bound method from here. Subsequent calls will never reach this point, due to the way     // JavaScript runtimes look up properties on objects; the bound method, defined on the instance, will effectively hide it.     return instance[propKey];}完整来源这个想法也可以更进一步,通过在类装饰器中执行此操作,迭代方法并在一次传递中为每个方法定义上述属性描述符。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JQuery