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

Posted 2023-02-22

【中文标题】JavaScript/jQuery 中括号中的代码块是啥意思？ [复制]

【英文标题】：What does a block of code in parentheses mean in JavaScript/jQuery? [duplicate]JavaScript/jQuery 中括号中的代码块是什么意思？ [复制]

【发布时间】：2011-06-05 01:13:54

【问题描述】：

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

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

var foo = (function () 
    var someVar;

    function someFunc() 
        return true;
    
)();

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

【问题讨论】：

还有***.com/questions/4531110/…

这不是完全重复的，因为它询问的是更一般的情况，而不是特定的 jQuery 情况——这是一个类似的情况。

@Orbling 是的，但是这两个问题的答案都不是 jquery 特有的。

@Nikita Rybak：没错，但我相信我们会关闭重复问题的问题，而不是因为可以在不同的标题下找到有效的答案。

是的，就个人而言，当我发现有重复答案的问题时，我会在下面的“答案”部分发布指向该答案的链接，而不是投票关闭。重复的答案与重复的问题不同。问题应该仍然存在，以便可以搜索。

【参考方案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 中的函数确实访问了该变量，因为它能够更改其值，并引用它之前设置的新值。

【参考方案2】：

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

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

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

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

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