13

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

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

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

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()但在其中this不是类型BaseDialog（与 in 不同NonEventHandlerMethod）。

我需要对话框选项字段的事件处理函数的原因以及我不能简单地这样做的原因：

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

是因为我需要在扩展 DialogClass 的类中添加额外的开放事件处理逻辑，并且 this.member 和 super.member 之间没有区别...... this.function() 和 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
      } 
      ...
 }

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

   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.
4

1 回答 1

14

TypeScript 遵循通常的 JavaScript 范围约定，因此this将依赖于上下文。如果您有基于事件触发的类的方法，this则将成为事件目标。当你直接调用一个类上的一个方法时，this会是这个类。

如果你想解决这个问题，你可以利用 JavaScript 如何通过提供this别名来遍历作用域链......

这是一种方法：

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

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

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

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

于 2013-01-23T20:31:47.583 回答