javascript对象，使用两种不同的调用函数方式查看预期结果

Question

我不明白为什么会这样......

我需要获取在mousedown上设置的对象startPoint和来自mousemove的当前e.pageY来进行一些计算。

var adjustHeight = {
    change: function(e) {
        console.log(this.startPoint)
        console.log(e.pageY);
    },
};

$('#dragger').mousedown(function(e) {
    e.preventDefault();

    adjustHeight.startPoint = e.pageY;

    $(window).on('mousemove', adjustHeight.change());

    $(window).on('mouseup', function() {
        $(window).off('mousemove', adjustHeight.change())
    });
})

然而，控制台打印出对象startPoint ，这是我所期望的，但e.pageY是未定义的

但是当我使用这条线时

...
    $(window).on('mousemove', adjustHeight.change);

    $(window).on('mouseup', function() {
        $(window).off('mousemove', adjustHeight.change)
    });
...

我按预期获得了e.pageY ，但现在startPoint未定义。 当我检查this是指向它的是DOMWindow ....

我的问题是为什么会发生这种情况，我将如何同时获取对象属性和函数e ？

Answer 1

$(window).on('mousemove', adjustHeight.change());

正在执行adjustHeight.change并将返回值传递给.on() 。 由于您没有将任何参数传递给adjustHeight.change ，因此e将是undefined （并且e.pageY将不可用）。

---

$(window).on('mousemove', adjustHeight.change);

正确地将函数传递给.on ，因此稍后将事件对象传递给处理程序，您可以访问e.pageY 。 但是上下文（ this ）不再是adjustHeight ，它是绑定处理程序的DOM元素。 在这种情况下哪个是window ， window没有startPoint属性。

所述MDN文档具有约一个很好的文章this （一般）， 一样quirksmode.org （相对于事件处理程序）。

---

方案 ：

将一个新函数作为处理程序传递，调用adjustHeight.change并传递event对象：

$(window).on('mousemove', function(event) {
    adjustHeight.change(event);
});

或使用$.proxy ^[docs] 将 adjustHeight.change 绑定到adjustHeight ：

$(window).on('mousemove', $.proxy(adjustHeight.change, adjustHeight));

由于您以后还想要解除处理程序的绑定，您应该将其分配给变量或使用命名空间事件^[docs] 。

例：

$(window).on('mousemove.dragger', $.proxy(adjustHeight.change, adjustHeight));

$(window).on('mouseup.dragger', function() {
    // removes both, the mousemove and mousup event handlers
    $(window).off('.dragger');
});

Answer 2

首先，这是错误的：

$(window).on('mousemove', adjustHeight.change());

然后，默认情况下， change()不绑定adjustHeight 。 你必须做的事情如下：

$(window).on('mousemove', function() {
    adjustHeight.change();
});

或者，在现代浏览器中：

$(window).on('mousemove', adjustHeight.change.bind(adjustHeight));

Answer 3

...

$(window).on('mousemove', adjustHeight.change);

$(window).on('mouseup', function() {
    $(window).off('mousemove', adjustHeight.change)
});

...

（行：3）

console.log("start:" + adjustHeight.startPoint)