打字稿 + Jquery Ajax + 这个

Posted 2023-03-13

【中文标题】打字稿 + Jquery Ajax + 这个

【英文标题】：Typescript + Jquery Ajax + this

【发布时间】：2013-03-17 17:20:02

【问题描述】：

我正在将一些 javascript 代码移植到 typescript 中，但遇到了一个问题。

我有一个 ajax 调用，它将一个对象作为上下文传递，该对象包含一些回调和一些其他信息，这些信息由成功或错误回调读出，指示成功调用应重定向到的位置：

function SomeAjaxService

    var self = this;

    self.CheckErrorType = function(...) 
        // Do something
    ;

    var SuccessProxyCallback = function(results) 
        // Do some stuff with results, like send off some events
        this.successCallback(results);
    ;

    var FailureProxyCallback = function(...) 
        // Do some stuff with errors, and fire some events
        var someErrorType = self.CheckErrorType(...);
        this.failureCallback(someErrorType);        
    ;

    self.SendRequest = function(requestArgs) 
        var ajaxSettings = 
            context: requestArgs,
            // Assign a load of stuff
        ;

        $.ajax(ajaxSettings);
    ;

现在您可以看到失败代理调用本地方法以及使用“this”上下文对象。那么如何使用 typescript 处理这种情况呢？

您可以在构造函数中设置self = this 并像以前一样继续吗？

== 编辑 ==

按照这里的要求，上面的类表示显示了由于缺少 self 变量而需要 2 件事的问题。

class SomeAjaxService

    public CheckErrorType(someArg1: any, someArg2: any) 
        // Do some stuff with data
    ;

    private SuccessProxyCallback(results: any) 
        // Do some stuff with results, like send off some events
        this.successCallback(results); 

        // Does the above *THIS* usage point to the context of the 
        // Ajax call or the actual instantiated class
    ;

    private FailureProxyCallback(...) 
        // Do some stuff with errors, and fire some events
        var someErrorType = this.CheckErrorType(...);

        // The above *THIS* call cannot be correct if the context has overwritten
        // the scope of this, however I dont know if this is true, do I even need
        // this.CheckErrorType to invoke a local method?

        this.failureCallback(someErrorType);        

        // As mentioned above same issue here but the *THIS* should hopefully
        // point to the context object on the ajax object not the local instance.
    ;

    public SendRequest(requestArgs: any) 
        var ajaxSettings : JqueryAjaxSettings = 
            context: requestArgs,
            // Assign a load of stuff
        ;

        $.ajax(ajaxSettings);
    ;

就像我上面所说的，主要问题是在一个方法中，我需要调用其中一个实例方法，以及从 ajax 调用调用上下文对象上的方法。使用原始 javascript，我将拥有 self = this，然后我可以绕过 this 被覆盖，这是将 ajax 异步状态对象保持在范围内所必需的。

【问题讨论】：

这段代码的 TypeScript 编译正是这段代码本身，所以你在这里真正遇到的是一个 JavaScript 问题。或者您是否尝试将其转换为一个类（如果是，您目前有什么）？

这是原始的 javascript，这是一组模拟的 javascript 来显示我遇到的问题。如果有帮助，我将使用模拟打字稿类进行更新，尽管我认为没有它问题会很明显。

这可能有助于youtube.com/watch?v=tvocUcbCupA&hd=1

【参考方案1】：

你可以在构造函数中设置 self = this 并像以前一样继续吗？

抽象地说，在构造函数中执行此操作通常不会解决任何问题（除非您稍后在该方法中捕获它——见下文）。 TypeScript 类将类实例数据存储在对象本身上，而不是捕获本地数据。因为self 将存储在this 对象上，所以您最终不会拥有以前没有的任何东西。

这是一种方法：

class SomeAjaxService

    private FailureProxyCallback(context, arg) 
        // now 'this' is the class instance and 'context' is requestArgs 
    

    public SendRequest(requestArgs) 
        var self = this; // Note: captured local used in closure below
        var ajaxSettings = 
            context: requestArgs,
            // Do not use an arrow function here, even though it's tempting!
            error: function(arg)  self.FailureProxyCallback(this, arg) 
        ;

        $.ajax(ajaxSettings);
    ;

【讨论】：

使用lambda表达式（箭头函数）有什么问题？