立即调用函数表达式 (IIFE) 与否答案

【问题标题】：Immediately-Invoked Function Expression (IIFE) vs not立即调用函数表达式 (IIFE) 与否
【发布时间】：2012-12-28 09:16:38
【问题描述】：

我看到很多类似的代码：

var myApp ={};
(function() {
    console.log("Hello");
    this.var1 = "mark";     //"this" is global, because it runs immediately on load.  Caller is global
    myApp.sayGoodbye = function() {
        console.log("Goodbye");
    };
})();

这会导致匿名函数立即执行。但是，与仅仅将代码内联相比，这样做有什么好处呢？

var myApp ={};
console.log("Hello");
var1 = "mark";     
myApp.sayGoodbye = function() {
    console.log("Goodbye");
};

显然它与函数的范围有关，但由于该函数是匿名的并且由窗口调用，所以它的范围（即this）是全局的，不是吗？

【问题讨论】：

在第二个 sn-p 中，var1 附加到窗口范围，在第一个中它不是。
但是当我使用 Chrome 浏览示例 1 时，var1 是全局的。
这种结构的原因不在我们看到的代码中。或者完全没用。请向我们展示更多代码。
我认为后者在严格模式下不起作用
@dystroy - 这是一个示例，没有其他代码。根据 Chrome，var1 每次都是全局的。

标签： javascript design-patterns anonymous-function iife

【解决方案1】：

通常，你会有这个：

        var myApp ={};
        (function() {
            console.log("Hello");
            var var1 = "mark";  
            myApp.sayGoodbye = function() {
                console.log("Goodbye");
            };
        })();

主要区别在于var1 不会弄乱全局命名空间。此调用后，var1 仍与之前相同（通常未定义）。

由于var1 只能从闭包中定义的函数访问，所以称为“私有”。

除了避免可能的冲突原因之外，不要在无用时保留全局变量会更干净。

在这里，您没有局部变量，而是定义为this.var1 的全局变量。这可能是一个错误，或者原因会在代码的其他地方找到。

【讨论】：

谢谢，我认为这是最接近的解释。只要您var 在匿名 fn 中声明变量，它们就不会泄漏到全局命名空间。我发现 javascript 中this 的定义非常混乱！

【解决方案2】：

一个原因：将代码包装在匿名函数中允许您创建一个模块，该模块将公共 API 与仅在模块内部使用的私有函数和变量区分开来。这样可以避免污染全局命名空间。

var myApp ={};
(function() {
    console.log("Hello");
    this.var1 = "mark";

    function helper() {/*Some code here*/;}

    myApp.sayGoodbye = function() {
        helper()
        console.log("Goodbye");
    };
})();

我可以说：

var myApp ={};
console.log("Hello");
var var1 = "mark";

function helper() {/*Some code here*/;}

myApp.sayGoodbye = function() {
    helper()
    console.log("Goodbye");
};

但是全局范围包含一个名为helper 的函数，它对任何使用您的模块的人都没有用，并且可能导致与其他模块的命名冲突。

我也可以只包含 helper 作为 myApp 的方法。

var myApp ={};
console.log("Hello");
var var1 = "mark";

myApp.helper = function() {/*Some code here*/;}

myApp.sayGoodbye = function() {
    this.helper()
    console.log("Goodbye");
};

但是，我可能希望阻止用户直接调用helper，这样就不行了。

【讨论】：