事件类型字段的Typescript事件处理函数 - 不正确的上下文 [英] Typescript event handler function for event type field - Incorrect context

问题描述

这是来自jquery.d.ts的jquery接口：

This is a jquery interface from jquery.d.ts:

export interface IDialogEvent extends DialogEvent {
    (event: Event, ui: DialogUIParams): void;
}

这是我的自定义界面，模仿jquery.d的DialogOptions界面的部分功能.ts：

This is my custom interface mimicking partial functionality of the DialogOptions interface of jquery.d.ts:

export interface IDialogOptions {
    open: IDialogEvent;
}

export class DialogClass implements IDialogOptions { 

    //Dialog options
    public open: IDialogEvent;

    //Class related fields
    public someField: any;
    public dialogEl: JQuery;

    constructor() { 
        this.open = this.OpenHandler;
        this.dialogEl = $("<div></div>").dialog(this); 
        //Passing "this" initializes the dialog by mapping relevant class fields
        //to the dialog's "option" object, in this case the only "relevant" field is "open".
    }

    public OpenHandler(event: Event, ui: DialogUIParams) { 
        var value = this.someField; //BAD. "this" is not type BaseClass
    }

    public NonEventHandlerMethod() { 
        var value = this.someField; //GOOD. "this" is type BaseClass
    }  
}

var dialog = new DialogClass();
dialog.dialogEl.dialog("open"); 

最后一行触发 OpenHandler（）但是在其中，此不是类型 BaseDialog （与 NonEventHandlerMethod ）。

The last line fires OpenHandler() but inside it, this is not type BaseDialog (unlike in NonEventHandlerMethod).

我需要对话框选项字段的事件处理函数以及我不能简单地执行此操作的原因：

The reason I need an event handler function for the dialog options field and the reason why I can't simply do this:

 export class DialogClass implements IDialogOptions { 
     ...
      constructor() { 
          this.open = () => {
                //event handling logic
          };
          ...
      }
      ...
 }        

是因为我需要在扩展DialogClass的类中添加额外的开放事件处理逻辑，并且this.member和super.member之间没有区别... this.function（）和super.function之间只有区别（）：

is because I need to add additional open-event handling logic in classes that extend DialogClass and there is no differentiation between this.member and super.member... there is only differentiation between this.function() and super.function():

 export class LoginDialog extends DialogClass { 
     ...
      constructor() { 
          this.open = this.OpenHandler;
          ...
      }

      public OpenHandler(event: Event, ui: DialogUIParams) { 
           super.OpenHandler(); //Base handling logic

           //Additional handling logic
      } 
      ...
 } 

我认为这可能是一个错误，因为

I think this may be a bug because

   export class DialogClass implements IDialogOptions { 
     ...
      constructor() { 
          this.open = () => {
                var test = this.someField;  //Correct context
          };
          ...
      }
      ...
   }  

并直接调用该方法：

   var dialog = new DialogClass();
   dialog.OpenHandler();  //Correct context when called directly
   //Note: I haven't actually tested this persay but this function is no different
   //than any other functionso a direct call should certainly not be problem.

推荐答案

TypeScript遵循通常的JavaScript范围约定，所以此将取决于上下文。如果您在基于事件触发的类上有方法，此将成为事件目标。直接在类上调用方法时，此将是该类。

TypeScript follows the usual JavaScript scoping conventions, so this will be dependent on context. If you have a method on a class that fires based on an event, this will be the event target. When you directly call a method on a class, this will be the class.

如果你想绕过这样，你可以通过给这个别名来利用JavaScript如何走向范围链......

If you want to get around this, you can take advantage of how JavaScript walks up the scope chain by giving this an alias...

这是一种方法：

this.open = () => { this.OpenHandler(this); };

箭头函数语法创建和别名名称 _this 在JavaScript中。

The arrow-function syntax creates and alias name _this in the JavaScript.

public OpenHandler(context: DialogClass, event: Event, ui: DialogUIParams) { 
    var value = context.someField;
}

我们接受的巧妙别名版本作为参数， context.someField 应该具有我们追求的值。

We accept the cleverly aliased version of this as a parameter and context.someField should have the value we are after.

这篇关于事件类型字段的Typescript事件处理函数 - 不正确的上下文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！