3

我正在尝试将 JavaScript 对象文字包装在自执行匿名函数中。下面的第一个代码示例工作正常，但第二个没有，我不确定为什么？

作品：

(function(){
    return MyApp = {
        init: function() {
            console.log('MyApp init');
        }
    }
})();

不工作：

(function(){
    var MyApp = {
        init: function() {
            console.log('MyApp init');
        }
    }
    return MyApp;
})();

据我了解，SEAF 应该执行并立即返回。这就是为什么第一个示例返回 MyApp 作为我可以与之交互的对象的原因。我认为将 MyApp 分配给 SEAF 内的变量然后返回它会做同样的事情，但在：

Uncaught ReferenceError: MyApp is not defined

为什么？

4

3 回答 3

3

由于您的 SEAF 的结果（更好地命名为IEFE）没有在任何地方使用，因此函数返回什么并不重要。现在比较

(function(){
    MyApp = {…}
})();

和

(function(){
    var MyApp = {…}
})();

不同之处在于，在第二个函数中，您的变量前面有一个var关键字，使其成为 IEFE 的本地变量，而在第一个函数中，它是一个隐式全局（您应该避免）。这样，第二个片段不会分配给全局范围内的任何内容，并且MyApp稍后从外部访问将失败并出现错误。

最好返回一些值，然后将其分配给全局声明的变量：

var MyApp = (function(){
    return {…};
})();
于 2013-10-17T23:10:45.497 回答
1

您的第一个示例所做的是将 MyApp 设置为全局变量 - 由于该变量MyApp前面没有var关键字或点表示法，因此它变为全局变量。MyApp如果您要放入一个自动执行的函数，这听起来对您来说实际上不是问题——您实际上可以从中删除return语句——甚至在同一个函数中定义其他全局变量。您永远不会引用顶级函数的结果，因此没有使用 that return。

您的第二个示例MyApp使用 设置为局部变量var，因此它仅在运行它的函数的上下文中可见。

于 2013-10-17T21:12:58.630 回答
0

使用箭头函数的解决方案：

var myApp = (() => {
    return {
        init: () => console.log('MyApp init')
    };    
})();
myApp.init();

解释：

  • 全局变量myApp设置为IIFE（立即调用函数表达式）的结果。
  • init也可以写成箭头函数。
  • 如果箭头函数在 return 语句之前没有执行其他逻辑，并且返回一个对象字面量，则可以进一步简化。要从箭头函数返回对象字面量，请将其括在括号中：
var myApp = (
   () => ({
       init: () => console.log('MyApp init')
   })
)();
于 2020-10-27T12:30:18.227 回答