javascript - 有人可以用 JavaScript 解释这种函数包装语法吗？

Question

我理解以下示例中变量范围的概念，但是有人可以解释函数包装语法 (...)();，例如你如何在实际的日常 JavaScript 编程中使用它？这不是我从 PHP/Java/C# 了解到的东西。

window.onload = function() {
    var i = 4;
    console.log(i); //4
    (function showIt() {
        var i = 'whatever';
        console.log(i); //whatever
    })();
    console.log(i); //4
};

Answer 1

此表单有多种用途。一种是对一段代码进行词法作用域，使其内部变量和方法与包含它的更大的代码体保持分离。通过这种方式，它是 JavaScript 进行 block 作用域的方式。但我使用这种格式的最常见方式是替代这种格式:

var ret = {
    depth:0,
    initialized:false,
    helper:function() { /*help with some stuff*/ },
    initialize:function(){ /*do some initialization code*/ },
    action:function(){/*do the thing you want*/}
    destroy:function() { /*clean up*/ }
}

对于这种格式，绝对让我失望的是，查找丢失的大括号和逗号非常耗时。例如，上面的代码将无法运行，因为 action 声明末尾没有逗号，除非我指出，否则您将很难找到问题所在，因为当异常被抛出，它被抛在整个语句上，而不是“导致问题”的部分。这是一个可以预见的问题，如果可以避免的话，我就不再使用这种格式了。我拒绝。相反，同样的内容可以写得更清楚:

var ret = (function(){
    var self = {},
        initialized = false;

    var helper = function() { /*help with some stuff*/ };

    self.depth = 0;
    self.initialize = function() {/*do some initialization*/};
    self.action = function() {/*do the thing you want*/};
    self.destroy = function() { /*clean up*/ };

    return self;
}());

对我来说有两大优势。第一，缺少的大括号和逗号可以更容易地找到(抛出异常时，行号会靠近缺少的区域)。第二，您可以选择将某些变量和方法设为私有(private)，并保留第一段代码的所有好处。

我要为这种格式提供的最后一个插件是，上面的代码(有点像单例)可以通过以下方式转换为构造函数:1) 删除外部的调用大括号，2) 更改 self = {} 到 self = this，以及 3) 可选择地删除末尾的 return self:

var Ret = function(){
    var self = this,
        initialized = false;

    var helper = function() { /*help with some stuff*/ };

    self.depth = 0;
    self.initialize = function() {/*do some initialization*/};
    self.action = function() {/*do the thing you want*/};
    self.destroy = function() { /*clean up*/ };

    return self; // this is ignored by the compiler if used as a constructor
};
var ret = new Ret();