jQuery通过其elements事件更新对象

Question

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

我正在编写一个类，它主要基于传递给构造函数的元素。我希望这个元素有一个更新对象的事件。 我做到了这一切，但这只是感觉＆＃34; hacky ＆＃34;。

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版本中不起作用。