JavaScript中的(function(){})()构造是什么?

我想知道这是什么意思:

(function () {

})();

这是在说document。onload吗?

当前回答

还有一个用例是内存，缓存对象不是全局的:

var calculate = (function() {
  var cache = {};
  return function(a) {

    if (cache[a]) {
      return cache[a];
    } else {
      // Calculate heavy operation
      cache[a] = heavyOperation(a);
      return cache[a];
    }
  }
})();

2016-08-11 21:02:09

其他回答

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

输出:

2020-05-13 18:58:19

IIFE(立即调用函数表达式)是一个在脚本加载和退出时立即执行的函数。

考虑下面写在life .js文件中的函数

(function(){
       console.log("Hello Stackoverflow!");
   })();

上面的代码将在你加载life .js时立即执行，并打印'Hello Stackoverflow!在开发人员工具控制台。

有关详细解释，请参阅立即调用函数表达式(IIFE)

2017-01-15 08:13:43

它声明了一个匿名函数，然后调用它:

(function (local_arg) {
   // anonymous function
   console.log(local_arg);
})(arg);

2011-11-22 14:21:40

自执行函数通常用于封装上下文和避免名称混淆。在(function(){..})()中定义的任何变量都不是全局变量。

的代码

var same_name = 1;

var myVar = (function() {
    var same_name = 2;
    console.log(same_name);
})();

console.log(same_name);

产生如下输出:

2
1

通过使用这种语法，可以避免与JavaScript代码中其他地方声明的全局变量发生冲突。

2014-05-18 05:19:25

也就是说立即执行。

所以如果我这样做:

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

2011-11-22 14:21:29

JavaScript中的(function(){})()构造是什么?

推荐文章

最新文章

标签