javascript - 难以确定 JS/jQuery 代码中的 'this' 所指的内容

Question

在以下代码的多个实例中，我很难弄清楚“this”指的是什么:

 jQuery(function ($) {

    var coreChat = {

      fetch: function (fn) {
        $.ajax({
          url: "https://api.parse.com/1/classes/chats",
          data: {
             order: 'createdAt',
             limit: 10
          },
          type: "GET"
        })
        .done(function(data) {
          var messages = [];
          for (var i = 0, len = data.results.length; i < len; i++) {
            messages.push(data.results[i].text);
          }

          return fn(messages);
        });
      },

      send: function (message) {
        var data = JSON.stringify({text: message});
        $.ajax({
          url: "https://api.parse.com/1/classes/chats",
          data: data,
          type: "POST"
        });
      },

      display: function (messages) {

        // http://jsperf.com/update-only-text-vs-remove-dom

        var messageNode = $(".messages").find("li");

        messageNode.each(function (i) {
          var $this = $(this);
          if ($this.text() !== messages[i]) {
            $this.text(messages[i]);
          }
        });

      }

    };


    var myChat = {

      init: function () {
        **this**.fetchInitialData();
        **this**.bindSendEvent();
        **this**.refresh();
      },

      fetchInitialData: function () {
        var messagesWrapper = $(".messages");
        for (var i = 0; i < 10; i++) {
          $("<li></li>").appendTo(messagesWrapper);
        }
        myChat.updateMessages();
      },

      bindSendEvent: function () {
        $(".send").on("click", function (e) {
          var input = $(".draft");
          myChat.send(Chat.username + ": " + input.val());
          input.val("");
          e.preventDefault();
        });
      },

      refresh: function () {
        setInterval(function () {
          myChat.updateMessages();
        }, 3000);
      },

      updateMessages: function () {
        this.fetch(function (messages) {
          myChat.display(messages);
        });
      }

    };

    $.extend(myChat, coreChat);
    myChat.init();

  });

更具体地说，在代码的下半部分 - 在 myChat 对象中，有一个“init”属性，它作为一个值包含一个函数...

var myChat = {

      init: function () {
        this.fetchInitialData();
        this.bindSendEvent();
        this.refresh();
      },

这里的“这个”指的是什么？ coreChat 在代码的第二行到最后一行上扩展为 myChat 这一事实是否对确定“this”所指的内容产生影响？

$.extend(myChat, coreChat);

此外，myChat 对象的 updateMessages 属性中还有另一个“this”...

updateMessages: function () {
        this.fetch(function (messages) {
          myChat.display(messages);
        });
      }

^ 在这个例子中，this 指的是什么？ coreChat 的 fetch 函数正在“this”上执行，但是，“this”是什么？

作为一个快速切题的问题 - 在 updateMessages 函数中，它调用“fetch”函数。“fetch”与回调函数异步(“fetch”最初是在 coreChat 对象中找到的)。但是在 updateMessages 中，作为参数传入以获取的函数是什么？ fetch 是否应该执行它原来的回调函数，然后这个参数作为回调的参数？我肯定很困惑。

^ 我知道这是两个单独的问题 - 如果这提出了问题，我会删除它，并将其发布在一个新的单独问题中，但我只是想，因为有人可能已经完成了整个代码，也许他' d/她已经有能力回答第二个问题，我不妨问...

提前致谢!

Answer 1

如果您来自 Java 等面向对象的世界，“this”是一个有点不同的概念。在 Java 等语言中，“this”指的是当前正在执行的对象，并由方法的声明方式来定义。但是，在 Javascript 中，“this”指的是函数如何被调用，并且实际上是函数的执行上下文。事实上，引用 John Resig 在“Javascript Ninja 的 secret ”中的说法，它确实应该称为调用上下文。

回答您的问题:

1. this在 init函数指的是myChat目的。不，您使用 jQuery.extend 合并两个对象的事实与 this 的值无关。这对 jQuery 来说有点误导。

2. this在updateMessages也指myChat对象

上面代码中需要警惕的一件事是 setInterval refresh中的部分。您的代码是正确的，因为它调用 myChat 上的函数显式对象，但在该函数中， this引用全局对象(如果您在浏览器中运行，则很可能是“window ”)。

最后，回答您关于回调的第三个问题，fetch运行异步 POST。当该 POST 完成时，done回调被调用。从 done 返回的值回调是调用传递给 fetch 的函数的值。在您的示例中，这看起来是 undefined因为你的函数调用 display但是display没有指定返回值。任何不指定返回值的函数都将返回 undefined默认情况下。

希望有帮助。