javascript 中自执行函数的目的是什么？

Question

在 javascript 中，什么时候你想使用 this:

(function(){
    //Bunch of code...
})();

而不是 this:

//Bunch of code...

Answer 1

这都是关于变量范围的。 默认情况下，自执行函数中声明的变量仅可用于自执行函数中的代码。 这允许编写代码而无需关心变量在其他 JavaScript 代码块中的命名方式。

例如，正如 Alexander 的评论中提到的：

(function() {
  var foo = 3;
  console.log(foo);
})();

console.log(foo);

这将首先记录 3，然后在下一个 console.log 上抛出错误，因为 foo 未定义。

Answer 2

简单化。 看起来非常正常，几乎让人感到安慰：

var userName = "Sean";

console.log(name());

function name() {
  return userName;
}

但是，如果我在页面中包含一个非常方便的 javascript 库，将高级字符转换为其基本级别的表示形式，会怎么样？

等等……什么？

我的意思是，如果有人输入带有某种重音的字符，但我只想在程序中输入“英语”字符 AZ？ 嗯...西班牙语“ñ”和法语“é”字符可以翻译为“n”和“e”的基本字符。

因此，有人写了一个全面的字符转换器，我可以将其包含在我的网站中......我将其包含在内。

一个问题：它有一个名为“名称”的函数，与我的函数相同。

这就是所谓的碰撞。 我们在同一范围中声明了两个具有相同名称的函数。 我们想避免这种情况。

所以我们需要以某种方式限制我们的代码范围。

在 javascript 中确定代码范围的唯一方法是将其包装在一个函数中：

function main() {
  // We are now in our own sound-proofed room and the 
  // character-converter library's name() function can exist at the 
  // same time as ours. 

  var userName = "Sean";

  console.log(name());

  function name() {
    return userName;
  }
}

这可能会解决我们的问题。 现在所有内容都被封闭起来，只能从我们的左大括号和右大括号内访问。

我们有一个函数中的函数......这看起来很奇怪，但完全合法。

只有一个问题。 我们的代码不起作用。
我们的 userName 变量永远不会回显到控制台！

我们可以通过在现有代码块之后

function main() {
  // We are now in our own sound-proofed room and the 
  // character-converter libarary's name() function can exist at the 
  // same time as ours. 

  var userName = "Sean";

  console.log(name());

  function name() {
    return userName;
  }
}

main();

或之前添加对函数的调用来解决此问题！

main();

function main() {
  // We are now in our own sound-proofed room and the 
  // character-converter libarary's name() function can exist at the 
  // same time as ours. 

  var userName = "Sean";

  console.log(name());

  function name() {
    return userName;
  }
}

第二个问题：名称“main”尚未被使用的可能性有多大？ ……非常非常苗条。

我们需要更多的范围界定。 以及一些自动执行 main() 函数的方法。

现在我们来谈谈自动执行函数（或者自动执行、自动运行等等）。

((){})();

语法很尴尬。 然而，它确实有效。

当您将函数定义括在括号中并包含参数列表（另一组或括号！）时，它充当函数调用。

因此，让我们再次查看我们的代码，使用一些自动执行语法：

(function main() {
  var userName = "Sean";
                
    console.log(name());
                
    function name() {
      return userName;
    }
  }
)();

因此，在您阅读的大多数教程中，您现在都会受到“匿名自动执行”或类似术语的轰炸。

经过多年的专业发展，我强烈强烈建议您为您编写的每个函数命名以供调试之用。

当出现问题时（而且确实会出现问题），您将在浏览器中检查回溯。 当堆栈跟踪中的条目有名称时，总是更容易缩小代码问题范围！

Answer 3

自调用（也称为
自动调用）是当一个函数
立即执行
定义。 这是一个核心模式
作为许多人的基础
JavaScript 的其他模式
发展。

我是它的忠实粉丝 :) 因为：

• 它使代码保持在最低限度
• 它强制将行为与表示分离
• 它提供了一个可以防止命名冲突的闭包

极大地 - （为什么你应该说它很好？）

• 它是关于定义和执行一个函数一次全部。
• 您可以让该自执行函数返回一个值并将该函数作为参数传递给另一个函数。
• 对于封装来说是有好处的。
• 它也适用于块作用域。
• 是的，您可以将所有 .js 文件包含在自执行函数中，并且可以防止全局名称空间污染。 ;)

更多此处。

Answer 4

命名空间。 JavaScript 的作用域是函数级的。

Answer 5

我已阅读所有答案，这里缺少一些非常重要的东西，我会亲吻。 “立即调用函数表达式 (IIFE)”，有两个主要原因：

1. 更好的命名空间管理（避免命名空间污染 -> JS 模块）
2. 我需要自执行匿名函数，或者更好地说 （模拟私有类成员，从 OOP 可知）

第一个已经解释得很好了。 对于第二个，请研究以下示例：

var MyClosureObject = (function (){
  var MyName = 'Michael Jackson RIP';
  return {
    getMyName: function () { return MyName;},
    setMyName: function (name) { MyName = name}
  }
}());

注意1：我们没有将函数分配给MyClosureObject，更进一步调用该函数的结果 >。 请注意最后一行中的 () 。

注意2：关于Javascript中的函数，您还需要了解的是，内部函数可以访问函数的参数和变量，它们是在函数内部定义的。

让我们尝试一些实验：

我可以使用 getMyName 获取 MyName 并且它有效：

 console.log(MyClosureObject.getMyName()); 
 // Michael Jackson RIP

以下巧妙的方法不起作用：

console.log(MyClosureObject.MyName); 
// undefined

但我可以设置另一个名称并获得预期的结果：

MyClosureObject.setMyName('George Michael RIP');
console.log(MyClosureObject.getMyName()); 
// George Michael RIP

编辑： 在上面的示例中，MyClosureObject 设计为在没有 new 前缀的情况下使用，因此按照惯例，不应将其大写。

Answer 6

我不敢相信所有答案都没有提到隐含的全局变量。

(function(){})() 构造不能防止隐含的全局变量，这对我来说是更大的问题，请参阅 http://yuiblog.com/blog/2006/06/01/global-domination/

基本上，该功能块确保所有依赖的“您定义的“全局变量”仅限于您的程序，它不能保护您免于定义隐式全局变量。 JSHint 等可以提供有关如何防御此行为的建议。

更简洁的 var App = {} 语法提供了类似的保护级别，并且在“公共”页面上时可以包装在功能块中。 （请参阅 Ember.js 或 SproutCore< /a> 使用此构造的库的真实示例）

就 private 属性而言，除非您正在创建公共框架或库，否则它们有点被高估了，但如果您需要实现它们, Douglas Crockford 有一些好主意。

Answer 7

这是一个很好的例子，说明了自调用匿名函数如何发挥作用。

for( var i = 0; i < 10; i++ ) {
  setTimeout(function(){
    console.log(i)
  })
}

输出：10, 10, 10, 10, 10...

for( var i = 0; i < 10; i++ ) {
  (function(num){
    setTimeout(function(){
      console.log(num)
    })
  })(i)
}

输出：0, 1, 2, 3, 4...

Answer 8

也许是范围隔离。 这样函数声明内的变量就不会污染外部命名空间。

当然，在一半的 JS 实现中，它们无论如何都会这样做。

Answer 9

是否有一个参数并且“代码堆”返回一个函数？

var a = function(x) { return function() { document.write(x); } }(something);

关闭。 something 的值由分配给 a 的函数使用。 something 可以有一些不同的值（for 循环）并且每次 a 有一个新函数时。

Answer 10

简短的答案是：防止全局（或更高）范围的污染。

IIFE（立即调用函数表达式）是将脚本编写为插件、附加组件、用户的最佳实践脚本或任何期望与其他人的脚本一起使用的脚本。 这可确保您定义的任何变量不会对其他脚本产生不良影响。

这是 IIFE 表达式的另一种编写方式。 我个人更喜欢以下方法：

void function() {
  console.log('boo!');
  // expected output: "boo!"
}();

https://developer .mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void

从上面的例子可以很清楚地看出 IIFE 也会影响效率和性能，因为预期运行的函数只有一次会被执行一次，然后永远被扔进虚空。 这意味着函数或方法声明不会保留在内存中。

Answer 11

一个区别是您在函数中声明的变量是局部变量，因此当您退出函数时它们就会消失，并且它们不会与其他或相同代码中的其他变量冲突。

Answer 12

首先，您必须访问 MDN IIFE ，现在关于此的一些要点

• 是立即调用函数表达式。 因此，当您的 javascript 文件从 HTML 调用时，该函数会立即调用。
• 这可以防止访问 IIFE 惯用法中的变量以及污染全局范围。

Answer 13

自执行函数用于管理变量的范围。

变量的作用域是定义它的程序区域。

全局变量具有全局作用域； 它在 JavaScript 代码中的任何位置定义，并且可以从脚本中的任何位置访问，甚至可以在函数中访问。 另一方面，在函数内声明的变量仅在函数体内定义。
它们是局部变量，具有局部作用域，并且只能在该函数内访问。 函数参数也算作局部变量，并且仅在函数体内定义。

如下所示，您可以访问函数内部的全局变量，还要注意，在函数体内，局部变量优先于同名的全局变量。

var globalvar = "globalvar"; // this var can be accessed anywhere within the script

function scope() {
    alert(globalvar);
    var localvar = "localvar"; //can only be accessed within the function scope
}

scope(); 

因此，基本上，自执行函数允许编写代码，而无需关心变量在其他 JavaScript 代码块中的命名方式。

Answer 14

您可以使用此函数返回值：

var Test = (function (){
        
        
        const alternative = function(){ return 'Error Get Function '},
        methods = {
            GetName: alternative,
            GetAge:alternative
            }
            
            

// If the condition is not met, the default text will be returned
// replace to  55 < 44
if( 55 > 44){



// Function one
methods.GetName = function (name) {
        
        return name;

};

// Function Two

methods.GetAge = function (age) {
        
        return age;

};





}










    return methods;
    
    
    }());
    
    
    
    
    
    
    
    // Call
   console.log( Test.GetName("Yehia") );

    console.log( Test.GetAge(66) );

Answer 15

由于 Javascript 中的函数是一等对象，通过这种方式定义它，它可以有效地定义一个“类”，就像 C++ 或 C# 一样。

该函数可以定义局部变量，并在其中包含函数。 内部函数（实际上是实例方法）将有权访问局部变量（实际上是实例变量），但它们将与脚本的其余部分隔离。

Answer 16

javascript中的自调用函数：

自调用表达式会自动调用（启动），无需被调用。 自调用表达式在创建后立即被调用。 这主要用于避免命名冲突以及实现封装。 在此函数之外无法访问变量或声明的对象。 为了避免最小化（filename.min）的问题，始终使用自执行函数。

Answer 17

(function(){
    var foo = {
        name: 'bob'
    };
    console.log(foo.name); // bob
})();
console.log(foo.name); // Reference error

实际上，上面的函数将被视为没有名称的函数表达式。

用左括号和右括号包裹函数的主要目的是避免污染全局空间。

函数表达式内的变量和函数变为私有（即，它们在函数外部不可用）。

Answer 18

考虑到你的简单问题：“在 javascript 中，你什么时候想使用这个：...”

我喜欢 @ken_browning 和 @sean_holding 的答案，但这是我没有看到提到的另一个用例：

let red_tree = new Node(10);

(async function () {
    for (let i = 0; i < 1000; i++) {
        await red_tree.insert(i);
    }
})();

console.log('----->red_tree.printInOrder():', red_tree.printInOrder());

其中 Node.insert 是一些异步动作。

我不能在函数声明中没有 async 关键字的情况下调用 wait，并且我不需要命名函数供以后使用，但需要等待插入调用，或者我需要一些其他更丰富的功能（谁知道？） 。

Answer 19

使用此方法是为了关闭。 请阅读此链接，了解有关闭包的更多信息。

Answer 20

看起来这个问题已经得到了回答，但无论如何我都会发布我的意见。

我知道什么时候我喜欢使用自执行函数。

var myObject = {
    childObject: new function(){
        // bunch of code
    },
    objVar1: <value>,
    objVar2: <value>
}

该函数允许我使用一些额外的代码来定义 childObjects 的属性和属性，以实现更清晰的代码，例如设置常用的变量或执行数学方程； 哦！ 或错误检查。 与仅限于嵌套对象实例化语法相反......

object: {
    childObject: {
        childObject: {<value>, <value>, <value>}
    }, 
    objVar1: <value>,
    objVar2: <value>
}

编码通常有很多晦涩的方法来做很多相同的事情，让你想知道，“为什么要麻烦呢？” 但新的情况不断出现，你不能再仅仅依赖基本/核心原则。

Answer 21

有3件事。

1. 当我们不需要函数名时
2. 当我们想要自动运行代码时。
3. 当我们想要创建一个上下文以避免变量名冲突和变量共享时。

例如，顶级初始化，小部件初始化可以通过自调用的烦人函数来包装来运行。 例如，

(function (document) {
      // code here
  })(document);

Answer 22

IIRC 它允许您创建私有属性和方法。