Question

我正在尝试将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

为什么？

Answer 1

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

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

与

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

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

最好返回一些您随后分配给全局声明的变量的值：

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

Answer 2

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

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

Answer 3

使用箭头功能的解决方案：

CL Test.c /Fa

说明：

全局变量<section class="content"> <div class="modal"></div> </section> <div class="side-tab"></div> // CSS // .content { position: relative; z-index: 1; } .modal { position: fixed; z-index: 100; } .side-tab { position: fixed; z-index: 5; }设置为IIFE (Immediately-invoked Function Expression)的结果。
var myApp = (() => { return { init: () => console.log('MyApp init') }; })(); myApp.init();也可以写为箭头函数。
如果在return语句之前在箭头函数中未执行任何其他逻辑，并且它返回了对象文字，则可以进一步简化它。要从箭头函数返回对象文字，请将其用括号括起来：

myApp

如何在JavaScript中返回对象文字

3 个答案:

使用箭头功能的解决方案：

说明：