JavaScript/jQuery 中括号中的代码块是什么意思？ [复制]

Question

可能重复：
What does (function($) {})(jQuery); mean?

我见过很多具有以下语法的 jQuery 代码，但我并不真正理解它的含义。它出现在this answer 和this answer 关于代码组织的问题上。两者都谈到了命名空间，所以我猜这就是它的作用。

var foo = (function () {
    var someVar;

    function someFunc() {
        return true;
    }
})();

这是用于命名空间的吗？它是如何工作的？有时在最后一组括号中有一个名称（命名空间？），有时没有。两者有什么区别？

Answer 1

包装函数的() 将匿名函数声明转换为函数表达式，然后可以使用表达式后面的() 立即调用该表达式。

在这种情况下，外部的() 真的没有必要，因为var foo = 会将它变成一个表达式。此外，foo 的值将是 undefined，因为函数调用不会返回任何内容。

它可用于创建新的变量范围，因为函数是在 javascript 中实现该功能的唯一方法。 （Javascript 没有块作用域。）

所以someVar 变量不能被外部作用域访问。有时可能希望以受控方式访问它。为此，您可以将引用someVar 的函数传递到该范围之外。然后在函数调用退出后，它的执行上下文将保持不变，并且someVar 将以您传递的函数提供的任何方式可用。

这称为创建closure。

假设您将一个值传递给调用，并将其分配给someVar。然后，您可以在对 foo 变量的调用中使用 return 一个函数。如果你返回的那个函数引用了someVar，那么你可以使用那个函数来获取它的值。

var foo = (function ( str ) {
    var someVar = str;
/*
    function someFunc() {
        return true;
    }
*/
    return function() {
        alert( someVar );
    };
})( 'somevalue' );

foo(); // alerts 'somevalue'

如您所见，foo 现在引用的函数仍然可以访问someVar。

假设您更改了它，以便返回到foo 的函数可以接受一个参数，这将更新myVar 的值。

var foo = (function ( str ) {
    var someVar = str;
/*
    function someFunc() {
        return true;
    }
*/
    return function( n ) {
        if( n ) {
            someVar = n;
        } else {
            alert( someVar );
        }
    };
})( 'somevalue' );

foo(); // alerts 'somevalue'

foo( 'newvalue' ); // give it a new value

foo(); // alerts 'newvalue'

现在您可以看到，foo 中的函数确实访问了该变量，因为它能够更改其值，并引用它之前设置的新值。

Answer 2

括号将匿名函数包裹起来，使其成为可以通过在其后添加参数直接调用的变量。

(function(param) {
    // do stuff
})(param);

最后的位不是命名空间，只是一个参数。你可能已经看到这个用于 jQuery 的：

(function($) {
    $('.something').addClass('.other');
})(jQuery);

这样做是将 jQuery 对象传递给函数，使 $ 变量成为匿名函数范围内的 jQuery 对象。人们喜欢使用简写$，但它会导致与其他库的冲突。此技术通过将完全限定的jQuery 对象传入并覆盖该函数范围内的$ 变量来消除冲突的可能性，因此可以使用快捷方式。