的Javascript：在目标函数调用时通过的onclick

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); 
}) 

但我得到undefined为Button1，“红色”的按钮2。有人能告诉我为什么吗？

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

Answer 1

的所有

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

首先给你undefined因为cat.getCol机身采用this其中AIN'当这个东西运行时，t cat。如果您担心跨浏览器兼容性，我建议在此处使用Function.prototype.bind或其他几种其他变体。对于将“方法”设置为事件处理程序并确保this保持绑定到封闭对象的问题，有许多已发布的解决方案。

下一页

$("#button2").click(getCol); 

工作得很好，因为getCol直接使用cat。

最后

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

是极其错误的。表达式cat.getCol()是调用，其返回undefined。这对于设置点击处理程序不是一个很好的值。您刚刚看到了document.write，但没有响应点击。

附录

Live demo using bind

Answer 2

一般在JS，this指函数的所有者。所以，在当函数被调用这两种情况下，this将解析的（jQuery对象）被点击的元素。 在第一种情况下，this不是'猫'，所以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