2

有了这个

示例 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所示？

4

2 回答 2

8

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

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

@bot 更新

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

$("#my_div").on("click", thisId);
于 2012-11-08T17:26:17.950 回答
2

@RoryMcCrossan 的答案是正确的，原因如下：JS 确定this引用ad hoc的内容，即：调用函数时，它会查看调用上下文：

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

thisId如果该函数没有像您this对window. 您可以使用and
以编程方式确定调用上下文，这是 jQuery 在幕后所做的：functionName.call(context)functionName.apply(context,[arguments]);

$.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 中的任何一种，这 - 在您的情况下 - 需要另一个匿名。要创建的函数对象，或者将函数作为回调直接传递给 jQuery。后者效率更高：更少的冗长和更少的函数对象需要。

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

顺便说一句：ECMA5 允许您使用该.bind方法将函数绑定到上下文，但这会使我们偏离主题......

于 2012-11-08T17:39:50.017 回答