1

我在下面的例子中理解了变量范围的概念，但是有人可以解释一下函数包装语法 (...)();，例如，你如何在实际的日常 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
};
4

4 回答 4

2

这是定义一个类似于您已经熟悉的函数showIT（使用）。function showIT() {...}最后的()直接在定义的同一行中调用该函数。这可能是您不熟悉的部分。就像您说showIT()要调用该函数一样，您可以将名称替换为实际定义，它将在 Javascript 中工作。

于 2012-04-28T03:53:36.827 回答
2

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

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;
}());

对我来说有两大优势。一、遗漏的大括号和逗号更容易被发现（抛出异常时，行号会靠近遗漏的区域）。第二，您可以选择将一些变量和方法保留为私有，并保留第一个代码块的所有好处。

我将为这种格式提供的最后一个插件是，上面的代码（有点像单例）可以通过以下方式转换为构造函数：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();
于 2012-04-28T04:22:32.637 回答
0

JavaScript 有函数字面量。它所做的只是创建一个函数字面量，并调用表达式的结果。这个名字让你感到困惑吗？所有名称都将用于引用其自身内部的函数，并且它是可选的。（请注意，这与 IE 8 及更早版本不兼容。）

于 2012-04-28T03:52:28.733 回答
0

与 C 中变量名具有块作用域不同，JavaScript（如 Pico）只有函数作用域。

因此，如果您想创建一个不能{ ... }像在 C 中那样使用的新名称范围，您必须使用(function() { ... })();.

于 2012-04-28T03:56:30.800 回答