在Javascript中定義和調用函數的最佳方法

Question

下面是我發布的一些示例Javascript，它顯示了定義和調用javascript函數的兩種不同方式。

這些不同的方法有名稱嗎？

哪種方法更受青睞？

第一個代碼塊看起來非常簡單，幾乎與定義和調用的過程PHP函數相同。

第二個我意識到設置更像一個類/命名空間它只是讓我有點困惑，因為我還沒有研究過多的javascript。 我是否認為所有這些函數都可以在任何一種方法中編碼為第一個或第二個代碼塊並且仍然有用？

對不起，如果我的問題不夠明確，我會在需要時進行修改，感謝您的幫助/信息

initCommentsHelp();

function initCommentsHelp() {
    $('#view-comments-help-a').live('click', function() {
      $('#comments-help').slideToggle("normal");
      return false;
    });
}

VS這樣做

Screenshot.Like.Shot.toggle();
Screenshot.Comment.toggle();
Screenshot.Flag.flag();
Screenshot.Flag.unflag();

var Screenshot = {
    Like: {
        Shot: {
            toggle: function() {
                if ($('.fav a.fav-toggle.processing').length == 0) {
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: data,
                        beforeSend: function() {
                            $('.fav-toggle').addClass('processing');
                            $link.text('Wait...');
                        },
                        success: function(responseHtml) {
                            $('#like-section').replaceWith(responseHtml);
                        }
                    });
                }

                return false;
            }
        },
    Comment: {
                toggle: function() {
                    var link = $(this);
                    var data = link.hasClass('liked-by-current-user') ? {_method: 'delete'} : null;
                    $.ajax({
                        type: 'POST',
                        url: this.href,
                        data: data,
                        success: function(responseHtml) {
                            link.closest('.comment').replaceWith(responseHtml);
                        }
                    });

                    return false;
            }
        }
    },
    Flag: {
        // Flag a screenshot as inappropriate or Appropriate
        flag: function(){
            var link = $(this);
            var screenshotId = link.modelId();
            if(!confirm("Are you sure you want to flag this shot?"))
                return false;

            $.ajax({
                type: 'POST',
                url: this.href,
                data: {
                    screenshot_id: screenshotId
                },
                success: function(responseHtml) {
                    $('#flag-section').html(responseHtml);
                }
            });

            return false;
        },
        unflag: function() {
            var link = $(this);
            var screenshotId = link.modelId();
            $.ajax({
                type: 'POST',
                url: this.href,
                data: {
                    _method: 'delete',
                    screenshot_id: screenshotId
                },
                success: function(responseHtml) {
                    $('#flag-section').html(responseHtml);
                }
            });

            return false;
        }
    },
};

Answer 1

第一種方法通常優選用於編寫獨立功能。 你可以把它們寫成

function testFunction() {
  // your code here...
}

要么

var testFunction = function() {
  // your code here...
}

您發布的第二個示例用於命名空間對象。 您可以在本文中閱讀有關命名空間的更多信息： JavaScript中的命名空間

Answer 2

作為對象屬性的函數（通過對象引用調用，例如obj.func() ）就是所謂的“方法”。 與對象無關的函數稱為“自由函數”。 方法具有不提供給自由函數的特殊訪問權限。 這些權限究竟取決於語言，但所有OO語言都包含一個特殊變量（您可以將其視為隱藏參數），可在函數體中訪問該方法所綁定的對象。 在JS中，此參數的名稱是this 。

this存在於自由函數中，它引用全局對象。 您可以將自由函數和全局變量視為全局默認對象的屬性。 對於瀏覽器，全局對象是window 。 因此，自由函數類似於全局變量，通常是壞的 。 自由函數不會像全局變量那樣經常導致問題，但它們仍然可以，並且出於同樣的原因。 因此，一些開發人員使用對象作為名稱空間來防止名稱沖突。

例如，一個模塊可能會創建一個sign函數，該函數返回一個數字是正數，負數還是0.另一個模塊可能有一個數字簽名消息的sign函數。 這些模塊由不同的公司創建，每個公司都不知道另一個。 想象一下，開發人員想要使用這兩個模塊。 如果兩者都被定義為自由函數，則以第二個定義的第二個將替換第一個，在另一個模塊中造成嚴重破壞。 為了防止這種情況，可以將每個函數定義為單獨對象的屬性。

自由函數和方法之間的實際區別在於如何訪問它們。 方法作為對象的屬性進行訪問，而自由函數可以通過名稱或變量直接訪問。 請注意，根據您訪問它的方式，可以將相同的函數視為方法或自由函數。

var obj = {
    type: 'method',
    meth: function (){
        return this.type;
    }
};
var func = obj.meth,
    name = 'free';

// the following two lines call the same function, though `this` will be bound differently for each.
obj.meth(); // returns 'method'
func();     // returns 'free'

您甚至可以使用自由函數並以多種方式將其作為方法調用：

function func(a, b) {
    return this.foo+a+b;
}
var obj = {foo: 'bar'};
// call func as a method using the `call` method
func.call(obj, 'baz', 'bam');
// call func as a method using the `apply` method
func.apply(obj, ['baz', 'bam']);

// call func as a method in the usual way
obj.meth = func;
obj.meth(1, 2); // 'foo12'

如果你仔細觀察你的第二個樣本，你會注意到大多數方法都使用this變量。 這些必須保留方法; 使它們成為自由函數可能會導致錯誤。

Answer 3

一個是定義對象中的函數，另一個是僅定義函數。 函數是JavaScript中的第一類對象，因此它們不需要定義對象。