Question

我正在使用Typescript编写几何引擎，我正在尝试实现拖放操作。我有一个点对象，它来自几何对象，它可以控制circle元素中的svg元素。我有一个mousedown偶数监听器附加到circle元素上，该元素调用属于点对象的函数，有点像这样：

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创建一个永远绑定函数上下文（this）的新函数：

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

在TypeScript（以及ES6中），我们有箭头函数：

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

箭头函数维持一个词汇，即周围环境中的this。

Answer 2

在纯粹的js中我会这样做（当然没有'class'^^）：

class point extends geometry {
var parent = this;
var htmlNode = null;
this.constructor = function() {
    parent.htmlNode = makeTheThing();
    parent.htmlNode.addEventListener(yourStuff);
}

this.onClick = function() {
    console.log(parent);
}

}

也许在ts中有更好的方法，但这应该有效

如何在javascript事件监听器中维护“正确”范围？

2 个答案: