我想知道这是什么意思:

(function () {

})();

这是在说document。onload吗?


当前回答

自执行匿名函数。它在创建时立即执行。

举个简单的例子,说明这个方法很有用:

function prepareList(el){
  var list = (function(){
    var l = []; 
    for(var i = 0; i < 9; i++){
     l.push(i);
    }
    return l;
  })();

  return function (el){
    for(var i = 0, l = list.length; i < l; i++){
      if(list[i] == el) return list[i];
    }
    return null;
  }; 
} 

var search = prepareList();
search(2);
search(3);

因此,不是每次都创建一个列表,而是只创建一次(开销更少)。

其他回答

立即调用的函数表达式(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

也就是说立即执行。

所以如果我这样做:

var val = (function(){
     var a = 0;  // in the scope of this function
     return function(x){
         a += x;
         return a;
     };
})();

alert(val(10)); //10
alert(val(11)); //21

小提琴:http://jsfiddle.net/maniator/LqvpQ/


第二个例子:

var val = (function(){
     return 13 + 5;
})();

alert(val); //18

通常,我们不会在程序中写入函数后立即调用它。 简单来说,当您在函数创建后立即调用它时,它被称为IIFE——一个漂亮的名字。

立即调用函数表达式(IIFE)是一种在创建时立即执行的函数。它与任何事件或异步执行没有关联。你可以定义一个IIFE,如下所示:

(function() {
     // all your code here
     // ...
})();

第一对括号函数(){…}将括号内的代码转换为表达式。第二对括号调用由表达式生成的函数。

IIFE也可以描述为一个自我调用的匿名函数。它最常见的用法是限制通过var创建的变量的作用域,或者封装上下文以避免名称冲突。

它是一个函数表达式,它代表立即调用函数表达式(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>

输出: