我想知道这是什么意思:
(function () {
})();
这是在说document。onload吗?
我想知道这是什么意思:
(function () {
})();
这是在说document。onload吗?
当前回答
在ES6语法中(为自己发帖,因为我一直登陆这个页面寻找一个快速的例子):
// simple
const simpleNumber = (() => {
return true ? 1 : 2
})()
// with param
const isPositiveNumber = ((number) => {
return number > 0 ? true : false
})(4)
其他回答
不,这个构造只是为命名创建了一个作用域。如果你把它分成几部分,你可以看到你有一个外部
(...)();
这是一个函数调用。括号内是:
function() {}
这是一个匿名函数。在构造中使用var声明的所有内容将只在同一构造中可见,并且不会污染全局名称空间。
立即调用的函数表达式(IIFE)立即调用函数。这仅仅意味着函数在定义完成后立即执行。
更常见的三个词:
// Crockford's preference - parens on the inside
(function() {
console.log('Welcome to the Internet. Please follow me.');
}());
//The OPs example, parentheses on the outside
(function() {
console.log('Welcome to the Internet. Please follow me.');
})();
//Using the exclamation mark operator
//https://stackoverflow.com/a/5654929/1175496
!function() {
console.log('Welcome to the Internet. Please follow me.');
}();
如果对它的返回值没有特殊要求,那么我们可以这样写:
!function(){}(); // => true
~function(){}(); // => -1
+function(){}(); // => NaN
-function(){}(); // => NaN
或者,它可以是:
~(function(){})();
void function(){}();
true && function(){ /* code */ }();
15.0, function(){ /* code */ }();
你甚至可以这样写:
new function(){ /* code */ }
31.new function(){ /* code */ }() //If no parameters, the last () is not required
在ES6语法中(为自己发帖,因为我一直登陆这个页面寻找一个快速的例子):
// simple
const simpleNumber = (() => {
return true ? 1 : 2
})()
// with param
const isPositiveNumber = ((number) => {
return number > 0 ? true : false
})(4)
它是一个立即调用的函数表达式,简称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')
它只是一个匿名函数,在创建后立即执行。
这就像你把它赋值给一个变量,然后在后面使用它,只是没有变量:
var f = function () {
};
f();
在jQuery中,有一个类似的构造,你可能会想到:
$(function(){
});
这是绑定就绪事件的简写形式:
$(document).ready(function(){
});
但是上面的两个结构都不是iife。