我想知道这是什么意思:
(function () {
})();
这是在说document。onload吗?
当前回答
它是一个函数表达式，它代表立即调用函数表达式(IIFE)。IIFE只是一个在创建后立即执行的函数。因此，函数不必等到调用它才能执行，而是立即执行IIFE。让我们通过示例来构造IIFE。假设我们有一个add函数，它接受两个整数作为参数并返回和 让我们把add函数放到IIFE中，
步骤1:定义函数
function add (a, b){
return a+b;
}
add(5,5);
Step2:通过将整个函数声明包装到圆括号中来调用函数
(function add (a, b){
return a+b;
})
//add(5,5);
步骤3:要立即调用函数，只需从调用中删除'add'文本。
(function add (a, b){
return a+b;
})(5,5);
使用IFFE的主要原因是在函数中保留私有作用域。在javascript代码中，你要确保你没有覆盖任何全局变量。有时您可能会意外地定义一个覆盖全局变量的变量。让我们举个例子。假设我们有一个名为iffe.html的HTML文件，body标签内的代码是-
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
好吧，上面的代码将毫无疑问地执行，现在假设您意外或有意地声明了一个名为document的变量。
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
const document = "hi there";
console.log(document);
</script>
</body>
你将会看到一个SyntaxError:重新声明不可配置的全局属性文档。
但是如果你想要声明一个名为documentmet的变量，你可以使用IFFE来实现。
<body>
<div id = 'demo'></div>
<script>
(function(){
const document = "hi there";
this.document.getElementById("demo").innerHTML = "Hello JavaScript!";
console.log(document);
})();
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
输出:
让我们尝试另一个例子，假设我们有一个计算器对象像bellow-
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
console.log(calculator.add(5,10));
</script>
</body>
这很神奇，如果我们不小心重新赋值了计算器对象的值。
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
console.log(calculator.add(5,10));
calculator = "scientific calculator";
console.log(calculator.mul(5,5));
</script>
</body>
是的，你将结束一个TypeError:计算器。Mul不是if .html的函数
但是在IFFE的帮助下，我们可以创建一个私有作用域，在那里我们可以创建另一个变量名计算器并使用它;
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
var cal = (function(){
var calculator = {
sub:function(a,b){
return a-b;
},
div:function(a,b){
return a/b;
}
}
console.log(this.calculator.mul(5,10));
console.log(calculator.sub(10,5));
return calculator;
})();
console.log(calculator.add(5,10));
console.log(cal.div(10,5));
</script>
</body>
输出:
其他回答
它只是一个匿名函数，在创建后立即执行。
这就像你把它赋值给一个变量，然后在后面使用它，只是没有变量:
var f = function () {
};
f();
在jQuery中，有一个类似的构造，你可能会想到:
$(function(){
});
这是绑定就绪事件的简写形式:
$(document).ready(function(){
});
但是上面的两个结构都不是iife。
这里已经有很多很好的答案了，但这里是我的2美分:p
你可以使用IIFE(立即调用函数表达式):
Avoiding pollution in the global namespace. Variables defined in IIFE (or even any normal function) don't overwrite definitions in global scope. Protecting code from being accessed by outer code. Everything that you define within the IIFE can be only be accessed within the IIFE. It protects code from being modified by outer code. Only what you explicitly return as the result of function or set as value to outer variables is accessible by outer code. Avoid naming functions that you don't need to use repeatedly. Though it's possible to use a named function in IIFE pattern you don't do it as there is no need to call it repeatedly, generally. For Universal Module Definitions which is used in many JS libraries. Check this question for details.
IIFE通常以以下方式使用:
(function(param){
//code here
})(args);
您可以省略匿名函数周围的括号()，并在匿名函数之前使用void运算符。
void function(param){
//code here
}(args);
它是一个立即调用的函数表达式，简称IIFE。它在创建后立即执行。
它与任何事件的任何事件处理程序(例如document.onload)无关。 考虑第一对括号中的部分:(function(){})();....它是一个正则函数表达式。然后看最后一对(function(){})();，它通常被添加到表达式中来调用函数;在这种情况下，我们之前的表达式。
当试图避免污染全局名称空间时，通常使用此模式，因为在IIFE中使用的所有变量(像在任何其他正常函数中一样)在其作用域之外是不可见的。 这可能就是为什么您将此结构与window的事件处理程序混淆的原因。Onload，因为它经常被这样使用:
(function(){
// all your code here
var foo = function() {};
window.onload = foo;
// ...
})();
// foo is unreachable here (it’s undefined)
Guffa建议的更正:
函数在创建后立即执行，而不是在解析后执行。整个脚本块在执行其中的任何代码之前都会被解析。此外，解析代码并不自动意味着它被执行，例如，如果IIFE在函数内部，那么直到函数被调用，它才会被执行。
更新 因为这是一个非常流行的话题，值得一提的是，IIFE也可以用ES6的箭头函数来编写(就像Gajus在评论中指出的那样):
((foo) => {
// do something with foo here foo
})('foo value')
它被称为IIFE -立即调用函数表达式。下面是一个例子来展示它的语法和用法。它用于将变量的使用范围限定在函数之前，而不是超出函数。
(function () {
function Question(q,a,c) {
this.q = q;
this.a = a;
this.c = c;
}
Question.prototype.displayQuestion = function() {
console.log(this.q);
for (var i = 0; i < this.a.length; i++) {
console.log(i+": "+this.a[i]);
}
}
Question.prototype.checkAnswer = function(ans) {
if (ans===this.c) {
console.log("correct");
} else {
console.log("incorrect");
}
}
var q1 = new Question('Is Javascript the coolest?', ['yes', 'no'], 0);
var q2 = new Question('Is python better than Javascript?', ['yes', 'no', 'both are same'], 2);
var q3 = new Question('Is Javascript the worst?', ['yes', 'no'], 1);
var questions = [q1, q2, q3];
var n = Math.floor(Math.random() * questions.length)
var answer = parseInt(prompt(questions[n].displayQuestion()));
questions[n].checkAnswer(answer);
})();
TL;DR:表达式可以括在圆括号中，如果函数的表达式和块形式组合在一起，则会与函数调用冲突。
我喜欢反例，因为它们描绘了一幅伟大的逻辑图景，而其他人没有列出任何反例。你可能会问，“为什么浏览器不能看到function(){}()，而只是假设它是一个表达式?”让我们用三个例子来比较这个问题。
var x; //这里fibonacci是一个block函数 函数fibonacci(x) { Var值= x < 2 ?X: fibonacci(X -1) + fibonacci(X -2); if (x === 9) console.log("The " + x + "th fibonacci is: " + value); 返回值; ｝ (x = 9); console.log(" x的值:" + x); Console.log ("fibonacci is a(n) ")+ typeof fibonacci);
当我们将函数转换为表达式时，观察事情是如何变化的。
var x; //这里fibonacci是一个函数表达式 函数fibonacci(x) { Var值= x < 2 ?X: fibonacci(X -1) + fibonacci(X -2); if (x === 9) console.log("The " + x + "th fibonacci is: " + value); 返回值; }) (x = 9); console.log(" x的值:" + x); Console.log ("fibonacci is a(n) ")+ typeof fibonacci);
当你使用not-operator而不是圆括号时，也会发生同样的事情，因为这两个操作符都将语句转换为表达式:
var x; //这里fibonacci是一个函数表达式 ！ 函数fibonacci(x) { Var值= x < 2 ?X: fibonacci(X -1) + fibonacci(X -2); if (x === 9) console.log("The " + x + "th fibonacci is: " + value); 返回值; ｝ (x = 9); console.log(" x的值:" + x); Console.log ("fibonacci is a(n) ")+ typeof fibonacci);
通过将函数转换为表达式，它由它下面的两行(x = 9)执行。由于表达式函数和块函数的行为是分开的，所以这两个例子都运行得很好，没有歧义(规范方面)。
名字的作用域
另一个重要的观察是，命名块函数对整个作用域可见，而函数表达式只对其本身可见。换句话说，fibonacci只对第一个示例中的最后一个console.log是块时可见。在这三个例子中，fibonacci对自身是可见的，允许fibonacci调用自身，这是递归。
箭头功能
逻辑的另一个方面是箭头函数。如果块函数和表达式函数的定义合并在一起，规范将不得不包括箭头函数的任意规则和例外:
函数hello() {console.log(" hello World")} (x) => console.log("hello " + x) console.log("如果你正在阅读，没有发生错误");
虽然函数块工作正常，但函数表达式后面跟着箭头函数会产生语法错误:
！ 函数hello() {console.log(" hello World")} (x) => console.log("hello " + x) console.log("如果你正在阅读，没有发生错误");
这里，第二行的(x)是调用前一行的函数还是箭头函数的函数参数是不明确的。
请注意，箭头函数多年来确实符合ECMAScript标准，在语言的初始设计中并不是一个因素;我的观点是，表达式函数和块函数之间的区别有助于JavaScript语法更有逻辑性和连贯性。
