javascript - 下面的函数调用在 Javascript 中是如何工作的

Question

我一直在玩与 this really cool 相关的代码文章。

在文章代码中，变量被分配了一个函数，如下所示:

var messageFactory = (function() {
    var that = {},
        $chatMessage = $('<p></p>').
          addClass('chat message'),
        $nick = $('<span></span>').
          addClass('nick'),
        $systemMessage = $('<p></p>').
          addClass('system message');

    var chat = function(message) {
      var $filledNick = $nick.clone().
            text(message.nick + ':');
      return $chatMessage.clone().
        append($filledNick).
        append(message.text);
    };

    var system = function(message) {
      return $systemMessage.clone().text(message.text);
    };

    that.chat = chat;
    that.system = system;

    return that;
  })();

后面的子函数调用如下，

messageFactory.system({ text: 'You changed your nick to ' + nick + '.'})

和

messageFactory.chat({ nick: 'me', text: message })

这些通话中发生了什么？具体来说，var messageFactory 的工作方式与 C# 等语言中的类定义类似，并且我缺少与范围相关的机制来了解如何通过对象 { text: '...' ...} 传递值.

非常感谢!

Answer 1

首先要注意的也是最重要的事情是最后一行。具体来说，()之前; 。它所做的就是立即执行第 1 行的匿名函数。这一点值得注意，因为 messageFactory不会包含匿名函数，而是包含它返回的任何内容。为了更好地理解这一点，我将举一个例子......

var x = (function(){ return "Hello!"; })();
// x will contain "Hello!", not the function.

要记住的第二件事是 Javascript 中的对象将维护对创建它们的闭包的引用。因此，如果您立即执行像我们上面所做的那样的函数，那将形成一个闭包和对象即使在函数执行完毕后，在该闭包中创建的内容也会保留对其的引用。另一个例子......

var sayHi = (function(){ 
    var salutation = "Hello";
    return function(name) {
       return salutation + ", " + name + ".";
    }
})();

再次注意，我们有一个立即执行的匿名函数。所以变量sayHi不会包含外部匿名函数，而是包含它的返回值。所以sayHi实际上将包含 function(name){ return salutation + ", " + name + ".";} 。您会注意到我们没有传入 salutation ，但我们仍然可以访问它，因为它是 closure 的一部分该函数是在其中创建的。

最后要理解的是，在 Javascript 中，{} 提供的代码。是一个对象字面量。它本质上相当于说 new Object() 。这些对象可以具有与 C# 对象相同的属性和方法，这就是 .text 的所在。来自您提到的。

在第 2 行，代码创建一个对象文字:var that = {} 。下一个 var 创建是 var chat = function(message){....其中创建了一个函数，该函数采用 message参数并用它做一些事情。在代码末尾，chat然后将函数分配给chat that的属性(property)然后that返回:that.chat = chat和return that .

这一切的重点是messageFactory不包含它似乎分配给的函数，而是 return该功能的。在这种情况下，该返回实际上是 that对象，它有两个属性 chat和system 。这些属性实际上指向 chat和system that 同一闭包内的变量创建于，这使得这一切都有效。

最后的部分很简单......当你打电话 messageFactory.chat({ text: 'something', nick: 时乔})你实际上传递的是 Object作为 chat 的参数闭包内部的函数。然后它引用该对象的 nick和text属性来返回其结果。

希望有帮助。我不确定我是否解释得很好，但这就是它在我脑海中的运作方式。