Question

有了这个

示例1

$("#my_div").on("click", function () {
    alert( $(this).attr("id") )
});

我们获得了正确的结果，但如果我使用它：

示例2

function thisId () {
    alert( $(this).attr("id") )
}

$("#my_div").on("click", function () {
    thisId();
});

现在结果未定义。当使用this的选择器和函数被写为不同的表达式时，请告诉我应该如何使用this，如示例2 ？

Answer 1

要使jQuery将元素引用传递给函数，必须提供函数作为引用。试试这个：

$("#my_div").on("click", thisId);

更新@bot

function thisId (event) {
    alert( $(this).attr("id") )
    alert(event.type);
}

$("#my_div").on("click", thisId);

Answer 2

@ RoryMcCrossan的回答是正确的，这就是原因：JS确定this引用 ad hoc ，即：当调用函数时，它会查看调用上下文：

myObject.property = function(){console.log(this)}
myObject.property();
  /\          ||
  ||who called |
  |_____________

如果函数没有作为一个obeject的方法被调用，就像你对thisId所做的那样，JS就像它总是那样 - 回落到全局对象，而this将指向window。
您可以使用functionName.call(context)和functionName.apply(context,[arguments]);以编程方式确定调用上下文，这是jQuery在幕后所做的事情：

$.fn.on(evt,callback)//simplified
{//jQ sets up its own event handler that looks like this:
    //here, this point to $("#my_div") in your case, so:
    var jQhandler = function(e)
    {
        callback.apply(this,[e]);//passes the event as an argument
    };
    this.addEventListener(evt,jQhandler,false);//<-- passes its handler by reference
}

所以你可以做这个使用apply，在你的情况下 - 需要另一个anon。要创建的函数对象，或者将函数直接传递给jQuery作为回调函数。后者效率更高：需要更少的冗长和更少的功能对象。

简而言之，这就是为什么@RoryMcCrossan是正确的，以及为什么有些人认为JS是世界上最容易被误解的语言：使用它的大部分人都不知道JS如何确定上下文。

正如旁注：ECMA5允许您使用.bind方法将函数绑定到上下文，但这会让我们远离主题......

当函数和选择器不在一起时，使用“this”

2 个答案: