javascript - 除了隐藏数据之外，将数据包装在函数调用中还有哪些优点？

Question

我正在阅读“Javascript:权威指南”，6E，并且遇到了这个示例:

  var cookies = (function() {
    var cookies = {};
    var all = document.cookie;
    if ( all === "" )
      return cookies;
    var list = all.split("; ");
    for ( var i = 0; i < list.length; i++ )
    {
      var cookie = list[ i ];
      var p = cookie.indexOf( "=" );
      var name = cookie.substring( 0, p );
      var value = cookie.substring( p + 1 );
      value = decodeURIComponent( value );
      cookies[ name ] = value;
    }
    return cookies;
  }());

我可以看到他在这里做了什么；他创建了一个函数并立即调用它。我只是不明白他为什么会在这种情况下这样做。我之前在 jQuery 中见过这个习惯用法来隐藏“$”运算符，但他在这里并没有隐藏任何东西；他创建的唯一变量是“cookies”，这就是他正在填充的变量。我不明白这与以下内容有何不同:

var cookies = {};
var all = document.cookie;
if ( all !== "" )
{
    var list = all.split("; ");
    for ( var i = 0; i < list.length; i++ )
    {
      var cookie = list[ i ];
      var p = cookie.indexOf( "=" );
      var name = cookie.substring( 0, p );
      var value = cookie.substring( p + 1 );
      value = decodeURIComponent( value );
      cookies[ name ] = value;
    }
}

除了在全局范围内引入“all”之外？他是否在这个特定示例中回避了一些我不知道的更深层次的极端情况？

Answer 1

Javascript 只有两个作用域:全局作用域和函数作用域。与许多语言不同，它没有 block 作用域。

因此，您的替代代码将 all、list、i、cookie、p、name 和 value 到定义 cookies 的任何范围内。

现在，如果您的代码片段位于某个函数定义内并且正在返回 cookie，那么情况可能还不错。但如果它位于顶级脚本内，那么您将看到许多非常常见的变量名称，并将它们转储到全局命名空间中。

因此，当您需要函数的作用域限制，但又不想让 Function 对象在之后运行时，立即函数非常有用。

编辑

扩展其他优势。

立即函数的另一个常见用途是按时设置，通常在涉及浏览器嗅探时:

var foo = (function(browser) {

    if(isBar(browser) {
        return function() {
            /* Some implementation of foo that is compatible with bar */
        };
    } else if(isBaz(browser) {
        return function() {
            /* Some implementation of foo that is compatible with baz */
        };
    } else {
        return function() {
            /* Some generic implementation of foo  */
        };
    }
}(browser_reference));

您一次性定义了 foo 的浏览器兼容版本，而无需用确定浏览器所需的变量来扰乱您的作用域。