使用 jQuery 直接绑定函数与包装器。为什么它不起作用？答案

【问题标题】：Binding a function directly vs a wrapper using jQuery. Why doesn't it work?使用 jQuery 直接绑定函数与包装器。为什么它不起作用？
【发布时间】：2014-08-21 08:34:01
【问题描述】：

我的代码：

var cardFrame = {
    element: "VALUE",
    flip: function(){
        console.log("flip: "+this.element);
    },
};

当按钮与此行绑定时，单击它会打印flip: VALUE。

$("#flashcard").bind( "click", function(){cardFrame.flip();} );

如果与下面的行绑定。按钮打印flip: undefined

$("#flashcard").bind( "click", cardFrame.flip );

这两个语句在功能上应该是相等的。这是为什么呢？

【问题讨论】：

bind 已弃用。您应该使用on 事件处理程序。 bind 无论如何都会在幕后调用它。 $('#flashcard').on('click', cardFrame.flip);

标签： javascript jquery binding

【解决方案1】：

不相等，“this”在两种情况下不同。

int first，“flip”作为“cardFrame”的一个方法被调用，所以函数中的“this”就是对象“cardFrame”。

第二个，jQuery传递的“this”是你附加点击事件的元素。

您可以阅读reference about this

【讨论】：

【解决方案2】：

这里的问题是不同的范围（this的值）。

在第一种情况下，this 的值根据需要指向对象 cardFrame。

在第二种情况下，这指向#flashcard 元素，因为它直接在事件中使用。

要了解发生了什么：

var cardFrame = {
    element: "VALUE",
    flip: function(){
        console.log(this);
    },
};

你会看到这两种情况下的值是不同的。

【讨论】：