Javascript 函数自动运行与仅在调用时运行

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17136293/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 07:12:48  来源:igfitidea点击:

Javascript functions run automatically vs only when called

javascript

提问by flacnut

I'm working on some code where a given page has many .js files associated with it (utilizing them like libraries). Each .js file looks like this inside:

我正在处理一些代码,其中给定页面有许多与之关联的 .js 文件(像库一样使用它们)。每个 .js 文件在里面看起来像这样:

(function() {
    .... all the lib functions and objects ....
})();

After some playing, I see that functions of the format (function() {...})();get called automatically. If I strip away the outer paren's to have function() {...}then the code is invalid. If I add a function name then the code is valid but does not run till called function foo() { ... }.

经过一些播放,我看到格式(function() {...})(); 被自动调用。如果我去掉外部括号以具有function() {...}那么代码无效。如果我添加了一个函数名,那么代码是有效的,但在调用函数 foo() { ... }之前不会运行。

Is there a special reason the lib has been written in this way? I would guess it would encapsulate variable names and such. What is it about the syntax of this that allows it to be run automatically on page load?

以这种方式编写lib是否有特殊原因?我猜它会封装变量名等。允许它在页面加载时自动运行的语法是什么?

回答by Denys Séguret

That's called an IIFE, an Immediately-Invoked Function Expression.

这称为 IIFE,即立即调用的函数表达式

It lets you define variables, including functions, which aren't visible from the outer scope and doesn't encumber the global name space.

它允许您定义变量,包括函数,这些变量在外部作用域中不可见,并且不会妨碍全局命名空间。

(function() {
    var v = ... // this variable can be used in the IIFE but not from outside
})();

The reason why you need the outer parenthesis is because a statement starting with function somethingis interpreted as a function declaration, which here would be invalid because a function declaration needs a name. You have to use a trick to make it an expression. Parenthesis do that, but you could have used other tricks, for example

需要外括号的原因是,以 开头的语句function something被解释为函数声明,这里是无效的,因为函数声明需要 name。你必须使用一个技巧来使它成为一个表达式。括号这样做,但您可以使用其他技巧,例如

+function(){
  ...
}();

but the outer parenthesis is the clearest and probably the less surprising solution.

但外括号是最清楚的,也可能是不太令人惊讶的解决方案。

回答by Sushanth --

Most of the libraries are anonymous functionswith no name.

大多数库都是没有名字的匿名函数

So it would need to be executed immediately. As you cannot call a function later which has no nameand has to be invoked immediately.

所以它需要立即执行。因为您不能稍后调用没有名称且必须立即调用的函数

回答by bfavaretto

What is it about the syntax of this that allows it to be run automatically on page load

允许它在页面加载时自动运行的语法是什么?

It's not called on page load, it's called right after the declaration. And that's because the calling parentheses are included:

它不是在页面加载时调用,而是在声明之后立即调用。那是因为包括调用括号:

})();
  ^^

If I strip away the outer paren's to have function() {...}then the code is invalid.

如果我去掉外部括号,function() {...}则代码无效。

That's a known JavaScript syntax quirk: it has to be considered an function expressionto be able to be immediately invoked; otherwise, it's interpreted as a function declaration, which cannot be called immediately.

这是一个众所周知的 JavaScript 语法怪癖:它必须被认为是一个能够立即调用的函数表达式;否则,它被解释为函数声明,不能立即调用。

Is there a special reason the lib has been written in this way? I would guess it would encapsulate variable names and such.

以这种方式编写lib是否有特殊原因?我猜它会封装变量名等。

Yes, most likely to keep the global namespace clean.

是的,最有可能保持全局命名空间干净。