Question

我遇到的一个常见问题是混淆$（this）指的是什么。

我经常会尝试给它一些奇怪的风格：

$(this).css("border","10px solid red")

有时会有所帮助。

然而，我对以下内容感到难过。我的问题可以通过两种方式回答：

1）在任何特定情况下，有没有一种通用的方式来“看”$（this）所指的是什么？也许与萤火虫结合使用？

2）更具体地说，任何想法$（this）应该在下面的示例中引用什么？我假设它将是一个btnSave类的输入，但似乎不是：

$(ajaxContainer).find("input.btnSave").click(function(){
    savePanel();
});

function savePanel() {
    $(this).css("border","10px solid red");
};

Answer 1

1）在Firebug中使用控制台：

var obj = $(this);
console.log(obj);

2）savePanel（）将没有正确的上下文使用$（this）。你可以尝试：

$(ajaxContainer).find("input.btnSave").click(function(){
    $(this).css("border", "10px solid red");
});

Answer 2

第一个问题（使用Firebug）：

在您要调查的上下文中的某个位置放置断点（例如，在示例中的savePanel()内）。
当您的应用程序到达断点时，将$(this)添加到监视面板并展开它以查看其属性。
第一个属性应该是"0"，它对应于jQuery对象匹配的第一个DOM节点（在本例中为this）。
如果将鼠标悬停在"0"的值上，Firebug将突出显示该页面上的DOM节点。如果单击该值，Firebug将切换到HTML选项卡并滚动到该元素。

第二个问题：

在您的匿名函数中，this将引用<input />元素。
在savePanel()内，this将引用window对象。

如果您希望savePanel()能够访问<input />元素，可以通过多种方式进行操作。在您的情况下，最简单的方法是从匿名函数传递它：

$(ajaxContainer).find("input.btnSave").click(function(){
  savePanel($(this));
});

function savePanel(inputElement) {
  inputElement.css("border","10px solid red");
}

Answer 3

在您的代码示例中，您遇到了一个典型的JavaScript问题，其中包含 this 的丢失上下文，因为从匿名函数调用另一个函数将丢失匿名函数的上下文（read more about it here ）。当像你一样调用savePanel时， this 将引用window对象。您可以在委派方法时使用call or apply从事件处理程序中保留 this 的上下文：

$(ajaxContainer).find("input.btnSave").click(function(){
    savePanel.call(this);
});

// OR

$(ajaxContainer).find("input.btnSave").click(function(){
    savePanel.apply(this, arguments);
});

function savePanel() {
    $(this).css("border","10px solid red");
};

Answer 4

“this”是javascript通常是混淆的来源，因为它在语法上看起来像一个变量，因此意味着传递它的想法。实际上，“this”更像是一个函数，并且总是返回当前执行上下文，即当前函数被调用或应用的上下文。

如果我没弄错的话，jquery尝试在调用回调绑定器的上下文中执行回调，即

 object1.object2.object3.bindSomeCallback(function() {
        object3 will be "this" in the callback
 })

在jquery中确定$（this）

4 个答案: