javascript - jQuery 通过其元素事件更新对象

Question

我是 JS 对象的新手，但我想学习正确的做事方法。

我正在编写一个类，它主要基于传递给构造函数的元素。我希望这个元素有一个更新对象的事件。我做到了，所以它发生了，但这感觉“hacky”。

function SomeClass(element) {
    this.element = element;
    this.mouseX = 0;
    this.mouseY = 0;
    this.setMousePosition = function(posX, posY) {
        this.mouseX = posX;
        this.mouseY = posY;
    };
    this.listenMousePosition = function() {
        var obj = this;
        $(this.element).on('mousemove',null, {obj: obj}, function(e, obj)  {
            e.data.obj.setMousePosition(e.offsetX, e.offsetY);
            $('#output').html('X: ' + e.data.obj.mouseX + '; Y: ' + e.data.obj.mouseY);
        })
    }
    this.listenMousePosition();

    return this;
}

window.contentDiv = new SomeClass($(".content")[0]);

是否有更好的方法来做到这一点，或者这是滚动的方式？

正如我所检查的 - 我不能像您在链接中看到的那样将其传递给函数:https://jsfiddle.net/nooorz24/v6f1jydm/7/

Answer 1

至少有几种方法可以做到这一点。这里的问题是，当您进入函数时，this 从引用类实例更改为引用方法。

引用另一个变量

通过使用外部变量，我们不关心 this 是否发生变化。

var self = this;

this.listenMousePosition = function() {
    $(self.element).on('mousemove', function(e) {
        self.setMousePosition(e.offsetX, e.offsetY);
        $('#output').html('X: ' + self.mouseX + '; Y: ' + self.mouseY);
    });
};

使用箭头函数

箭头函数不会更改 this 引用的内容。

this.listenMousePosition = () => {
    $(this.element).on('mousemove', e => {
        this.setMousePosition(e.offsetX, e.offsetY);
        $('#output').html('X: ' + this.mouseX + '; Y: ' + this.mouseY);
    });
};

请注意，箭头功能在 Edge 之前的 IE 版本中不起作用。