3

我正在尝试在类实例中设置 HTMLElement 成员的 onclick 事件处理程序，但我的两次尝试都存在问题：

1：关键字 this 不能使用

class ClassName {
  div: HTMLElement;
  constructor() {
    this.div = document.createElement('div');
    this.div.onclick = function(e) {
      this._onclick(); // keyword 'this' is not the instance in this scope
    }
  }
  _onclick() {
    alert('I've been clicked!');
  }
}

2：错误：'无法将'void'转换为（ev：FocusEvent）=> any。'

class ClassName {
  div: HTMLElement;
  constructor() {
    this.div = document.createElement('div');
    this.div.onclick =  this._onclick(); // error
  }
  _onclick() {
    alert('I've been clicked!');
  }
}

我认为这表明我对语言缺乏理解。如果有人可以请澄清并可能发布解决方案，将不胜感激！

4

2 回答 2

5

使用特定于打字稿的箭头符号：

class ClassName {
  div: HTMLElement;
  constructor() {
    this.div = document.createElement('div');
    this.div.onclick = (e) => {
      this._onclick(); // keyword 'this' is the instance in this scope
    }
  }
  _onclick() {
    alert('I've been clicked!');
  }
}

()=>而不是function()自动为您转义this，例如以下打字稿：

class ClassName {
    foo = "123"; 
    constructor(){
        var x = ()=>{
            alert(this.foo);
        }
    }
}

生成以下 javascript：

var ClassName = (function () {
    function ClassName() {
        var _this = this;
        this.foo = "123";
        var x = function () {
            alert(_this.foo);
        };
    }
    return ClassName;
})();

注意var _this = this在this函数内部使用闭包_this.foo

于 2013-07-09T22:05:17.907 回答
4

关键字绑定到调用函数的this上下文。当函数由于 DOM 元素的事件而被调用时，例如onclick，它指向该元素。

第一个示例的解决方法是将构造函数上下文保存在一个新变量中，该变量将调用that：

class ClassName {
  div: HTMLElement;
  constructor() {
    this.div = document.createElement('div');
    var that = this;   //that and this both point to the new Object
    this.div.onclick = function(e) {
                       //this now points elsewhere
      that._onclick(); //that still point to the new object
    }
  }
  _onclick() {
    alert('I\'ve been clicked!');
  }
}

在第二个示例中，您onclick通过添加括号来评估函数，因此您将其结果分配给div.onclick属性。

正确的代码是：

class ClassName {
  div: HTMLElement;
  constructor() {
    this.div = document.createElement('div');
    this.div.onclick =  this._onclick;
  }
  _onclick() {
    alert('I\'ve been clicked!');
  }
}
于 2013-07-09T22:03:01.633 回答