javascript - 以下JS语法有什么区别？

Question

下面是两种定义BW.Timer的方法。有人能告诉我有什么区别吗？我不确定第一个是否有效，但如果它有效，使用 myfunc=(function(){}()) 语法有什么不同？

BW.Timer = (function () {
    return {
        Add: function (o) {
            alert(o);
        },
        Remove: function (o) {
            alert(o);
        }
    };
} ());

还有……

BW.Timer = function () {
    return {
        Add: function (o) {
            alert(o);
        },
        Remove: function (o) {
            alert(o);
        }
    };
};

Answer 1

第一个是立即调用函数的返回值。第二个是函数。它本质上归结为它们之间的区别:

var f = (function() { return 0; })();

var f = function() { return 0; };

由于第一个函数被立即调用，因此变量 f 的值为 0。第一个 f 不是函数。但是，我们必须调用第二个 f 才能获取值:

f(); // 0

在您的示例中，第一个 BW.Timer 是对象文字本身，第二个是返回对象文字的函数。您必须调用函数才能到达对象:

BW.Timer().Add(x);

那为什么要用第一个呢？

您可能会问自己为什么要使用像 a = (function() { return {}; })() 而不是 a = {} 这样的语法，但这是有充分理由的。与常规函数不同，IIFE(立即调用函数表达式)允许模拟静态变量(通过单个实例维护其值的变量)。例如:

var module = (function() {
    var x = 0;

    return {   get: function()  { return x },
               set: function(n) { x = n }
    };

})();

以上是 Module Pattern 的教科书示例.由于函数被立即调用，变量 x 被实例化，返回值(对象)被提供给 module。除了使用为我们提供的 get 和 set 方法之外，我们无法访问 x。因此，x 是静态的，这意味着它的变量不会在您每次使用 module 时被覆盖。

module.set(5);

module.get(); // 5

另一方面，让我们看一个示例，其中 module 被声明为一个函数:

// assume module was made as a function

module().set(5);

module().get(); // 0

当我们调用 module() 时，每次都会覆盖 x 变量。因此，每次调用 module 时，我们都有效地使用了 module 和 x 的不同实例。