Question

我在这里尝试一些代码，

var cat={
    col:"Red",
    getCol:function(){
        document.writeln(this.col);
    }
}

function getCol(){
    document.writeln(cat.col);
}

$(function(){ 
    $("#button1").click(cat.getCol);
    $("#button2").click(getCol);
})

但是我为button1获得undefined，为button2获得了“Red”。有人可以告诉我为什么吗？

如果我把它改成$("#button1").click(cat.getCol());，我得到了我需要的“红色”......

Answer 1

首先

$("#button1").click(cat.getCol);

为您提供undefined，因为当cat.getCol运行时，this的正文使用的cat不是Function.prototype.bind。如果您担心跨浏览器兼容性，我建议您在此处使用this，或者使用其他几种变体。有许多已发布的解决方案可以解决将“方法”设置为事件处理程序并确保$("#button2").click(getCol);保持绑定到封闭对象的问题。

下一步

getCol

正常，因为cat直接使用$("#button1").click(cat.getCol());。

最后

cat.getCol()

非常错误。表达式undefined是调用，返回{{1}}。这不是为单击处理程序设置的好值。您刚刚看到document.write发生了，但没有响应点击。

<强>附录

Live demo using bind

Answer 2

通常在JS中，this引用函数的所有者。因此，在调用该函数的两种情况下，this将解析为（jQuery对象）元素被点击了。在第一种情况下，this不是'cat'，因此未定义col。因此，它给出了未定义的。在第二种情况下，没有这个，所以cat.col解析为Red。

我认为你需要做一些关于JS函数的阅读，这个，匿名函数.. http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/是一个很好的起点。

这是在MDN上 - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/this

Javascript：onclick调用时，对象中的函数未定义

2 个答案: