Gro*_*fit 11 javascript ajax jquery this typescript
我将一些javascript代码移植到打字稿上,我遇到了一个问题.
我有一个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);
};
}
Run Code Online (Sandbox Code Playgroud)
现在您可以看到失败代理调用本地方法以及使用"this"上下文对象.那你怎么用打字稿来处理这种情况呢?
你可以self = this
在构造函数中设置并继续像以前一样吗?
==编辑==
这里要求的是上面的类表示,显示由于缺少自变量,这需要两件事.
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);
};
}
Run Code Online (Sandbox Code Playgroud)
就像我上面说的那样,主要问题是在一个方法中我需要调用其中一个实例方法,并从ajax调用中调用上下文对象上的方法.使用原始的javascript我会有self = this
,然后我可以绕过this
被覆盖,这是在范围内保持ajax异步状态对象所必需的.
你能在构造函数中设置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);
};
}
Run Code Online (Sandbox Code Playgroud)