javascript - 调用 jQuery.post 回调函数的上下文是什么？

Question

比方说:

$(".button").click(function() {

    $.post("commandrunner.php",
        {
            param1: 'value',
            param2: 'value2',
            param3: 'value3'
        },
        function(data, textStatus) {
            $(this).parent().after('<p>button clicked</p>');
        },
        "json"
    );

});

我运行了这个但没有成功。在我推测回调没有在这个特定的“.button”的上下文中被调用之前，我尝试了几件事，所以 $(this) 是无用的。这反而奏效了:

$(".button").click(function() {
    var thisButton = $(this);

    $.post("commandrunner.php",
        {
            param1: 'value',
            param2: 'value2',
            param3: 'value3'
        },
        function(data, textStatus) {
            thisButton.parent().after('<p>button clicked</p>')
        },
        "json"
    );

});

这感觉有点像 hack。这是获取对单击按钮的引用的正确方法吗？调用的上下文(或任何其他回调)是什么？

谢谢!

阿里

Answer 1

您在这里注意到的是 JavaScript 闭包的工作方式。和其他OO语言一样，当一个方法被调用时，它有一个“this”，类似于Java的this或Ruby的self。然而，JavaScript this 具有非凡的可塑性，jQuery 在调用您的回调时利用该属性将其设置为有用的值。

对于事件，jQuery 将 this 指针设置为指向您将事件处理程序绑定(bind)到的元素。检查一下:

var hello = function() {
  console.log("Hello " + this);
});

如果您有 OO 背景，您可能会困惑地看着上面的片段:this 指向什么。默认情况下，它将指向全局对象(浏览器中的窗口)。但是您可以轻松地覆盖它:

hello.call("world") // will print "Hello world"

Call 在 this 之后接受多个参数，这些参数作为参数传入。名为 apply 的类似方法也将 this 作为第一个参数，但将参数数组作为第二个参数。

现在，如果我们再次查看您的示例:

$(".button").click(function() {

    $.post("commandrunner.php",
        {
            param1: 'value',
            param2: 'value2',
            param3: 'value3'
        },
        function(data, textStatus) {
            $(this).parent().after('<p>button clicked</p>')
        },
        "json"
    );

});

这里的问题是当jQuery再次调用该函数时，它并没有使用相同的this来调用它。当你创建一个匿名函数时，它会持有同一范围内的所有local变量，但不会持有this，这是由JavaScript本身设置的(对全局对象)或调用时覆盖。

因此，解决方案是将指向 this 的指针存储在局部变量中，该变量随后可用于闭包。

解决方案，如上所述，是:

$(".button").click(function() {
  var parent = $(this).parent();
  $.post("commandrunner.php",
    {
      param1: 'value',
      param2: 'value2',
      param3: 'value3'
    },
    function() {
      parent.after('<p>button clicked</p>')
    },
    "json"
  );
});

一般来说，当我存储本地元素时，我会尽可能存储最具体的元素集，以使回调代码更简单。常见的 jQuery 习惯用法是执行 var self = this，这也非常好。

另请注意，JavaScript 函数不检查参数的数量，因此如果您不使用它们，将参数留空是完全合法的。它们仍将被传入，但空参数列表将被忽略。