以下 function 調用如何在 Javascript 中工作

Question

我一直在玩與這篇非常酷的文章相關的代碼。

在文章代碼中，為變量分配了 function，如下所示：

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 })

這些電話里發生了什么？ Specifically it appears that the var messageFactory is working similar to a class definition in language like C#, and I'm missing the scope related mechanisms to how the values are being passed via the object { text: '...'...} .

非常感謝！

Answer 1

它是匿名的 class 聲明和實例化

http://jasonwyatt.tumblr.com/post/866536821/anonymous-classes-with-javascript-and-self-calling

Answer 2

首先要注意的也是最重要的事情是最后一行。 具體來說， ()在;之前 . 這樣做是立即在第 1 行執行匿名 function。這很重要，因為messageFactory將不包含匿名 function，而是從它返回的任何內容。 為了更好地理解這一點，我將舉一個例子......

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

要記住的第二件事是 Javascript 中的對象將保持對創建它們的閉包的引用。因此，如果您像我們在上面所做的那樣立即執行 function ，那將形成一個閉包和在其中創建的對象即使在 function 執行完畢后，閉包也會保持對它的引用。 另一個例子....

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

再次注意我們有一個匿名的 function 被立即執行。 所以變量sayHi不會包含外部匿名function，而是返回值。 所以sayHi實際上會包含function(name){ return salutation + ", " + name + ".";} 。 你會注意到我們沒有傳入salutation ，但我們仍然可以訪問它，因為它是創建此 function 的closure的一部分。

最后要理解提供的代碼是在 Javascript 中， {}是 Object 文字。 它本質上相當於說new Object() 。 這些對象可以具有與 C# object 相同的屬性和方法，這是您提到的.text的來源。

在第 2 行，代碼創建了一個 Object 文字： var that = {} 。 下一個 var 創建是var chat = function(message){....其中一個 function 被創建，它接受一個message參數並用它做一些事情。 在代碼的最后，那個chat function 然后被分配給那個的chat屬性that然后返回that ： that.chat = chat並return that 。

所有這一切的重點是messageFactory不包含它似乎分配給的 function，而是該 function 的return 。 在這種情況下，那個返回實際上是that Object，它有chat和system兩個屬性。 這些屬性實際上指向創建它的同一個閉包that的chat和system變量，這使得這一切都有效。

最后一塊很簡單......當您調用messageFactory.chat({ text: 'something', nick: Joe })時，您實際上是在將Object作為參數傳遞給閉包內的chat function。 然后它引用對象的nick和text屬性以返回其結果。

希望有幫助。 我不確定我是否解釋得很好，但這就是它在我腦海中的運作方式。