打字稿 + Jquery Ajax + 这个

Typescript + Jquery Ajax + this

提问by Grofit

I am porting some javascript code over to typescript and I have come across a problem.

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

I have an ajax call which passes an object as context, this object contains some callbacks and some other information which are read out by the success or error callbacks which indicate where the success invocation should be redirected to:

我有一个 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);
    };
}

Now as you can see the failure proxy calls a local method as well as a using the "this" context object. So how can you handle this sort of scenario with typescript?

现在，您可以看到失败代理调用本地方法以及使用“this”上下文对象。那么你怎么能用打字稿处理这种情况呢？

Can you just set self = thisin the constructor and continue as you were before?

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

== EDIT ==

== 编辑 ==

As requested here is a class representation of above showing the issue of this needing to be 2 things due to the missing self variable.

根据这里的要求，上面的类表示显示了由于缺少 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);
    };
}

Like I say above the main issue is that in a method I need to invoke one of the instances methods as well as invoke a method on the context object from the ajax call. With raw javascript I would have self = thisand then I can get around thisbeing overridden, which is required to keep the ajax async state object in scope.

就像我上面说的，主要问题是在一个方法中，我需要调用一个实例方法，以及从 ajax 调用中调用上下文对象上的一个方法。随着原材料的JavaScript我会self = this，然后我可以避开this正在被超越，这是需要保持AJAX异步状态对象范围。

采纳答案by Ryan Cavanaugh

Can you just set self = this in the constructor and continue as you were before?

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

Speaking abstractly, doing this in the constructor will usually solve nothing (unless you capture it later on in that method -- see below). TypeScript classes store class instance data on the object itself rather than capturing locals. Because selfwill be stored on the thisobject, you don't end up having anything you didn't already have before.

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

Here's one way to do it:

这是一种方法：

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);
    };
}