javascript - 如何维护 javascript 事件监听器中的 'correct' 范围？

Question

我正在用 Typescript 编写一个几何引擎，并且正在尝试实现拖放。我有一个从几何对象继承的点对象，它可以控制 svg 元素内的 circle 元素。我有一个 mousedown Even 监听器附加到调用属于点对象的函数的圆形元素，有点像这样:

class point extends geometry {
    htmlNode:any;
    constructor() {
        this.htmlNode = makeTheThing();
        addItToTheDom();
        this.htmlNode.addEventListener("mmousedown",this.onClick);
        onClick();
    }

    onClick() {
        console.log(this);
    }
}

当页面加载时，它会将点对象输出到控制台，但是当我单击时，它会输出 html 元素，而不是 javascript 对象。以前我是这样解决这个问题的:

class point extends geometry {
    htmlNode:any;
    constructor() {
        this.htmlNode = makeTheThing();
        addItToTheDom();
        var blah = this;
        var f = function() {
            console.log(blah);
        }
        this.htmlNode.addEventListener("mmousedown",f);
        f();
    }

    onClick() {
        console.log(this);
    }
}

这会在加载和单击时提供 javascript 对象，但它很难看，我想做得更干净。

更新:对于任何关心的人，我最终只是重写了这个，现在更漂亮了。

Answer 1

在纯 JavaScript (ES5) 中，您可以使用 bind 创建一个新函数，该函数将永远绑定(bind)函数上下文 (this):

this.htmlNode.addEventListener("mmousedown",this.onClick.bind(this));

在 TypeScript 中(不久在 ES6 中)我们有箭头函数:

this.htmlNode.addEventListener("mmousedown", event => this.onClick(event));

箭头函数维护一个词法 this，即从周围上下文中获取 this。