Question

使用脚本标记：

<div id="first">
    me is first
</div>
<script type="text/javascript">
    var first = document.getElementById("first");
    console.log(first);
</script>

自我调用功能：

<div id="second">
    me is second
</div>
<script type="text/javascript">
    (function(){
        var second = document.getElementById("second");
        console.log(second);
    })();
</script>

在html元素之后放置的自调用函数和<script>标记之间的用法有何不同？我一直在调试以找到差异。但他们似乎行为相同。或者仅仅是好/坏的做法？

Answer 1

自执行函数创建一个新的内部作用域，其中包含second变量并防止它泄漏到全局名称空间中。然而，普通的<script>块first变量将被添加到全局范围中。

请记住，各个script块没有自己的范围，它们都在相同的全局范围内运行，这是脚本互操作所必需的。

Answer 2

您发布的两个示例之间的区别主要是一个是在函数中存储变量（var second）而另一个不是（var first）。

在你的第二个例子中，你将元素对象分配给一个变量 in 一个匿名的，自我调用的函数（没有名称归于它所以它的值永远不会存储，并在末尾附加以下括号调用该函数）。

命名变量的一个例子是......

function yourFunctionName () {
  console.log("I'm a function with a name");
}

匿名函数是一个没有名称的函数，即使它被分配给变量anon_function，它的'仍然是匿名的......

var anon_function = function(){
  console.log("I'm anonymous");
}

上述函数的返回值存储在anon_function变量中。

尾部括号告诉函数立即执行，就像调用命名函数一样。

function(){
  console.log("I'm anonymous and self-invoking");
}()

一旦函数运行然后终止，函数内部创建的变量将被丢弃，全局对象保持原样。

“推荐”包装整个函数的括号，以帮助程序员区分正常函数：

(function(){
  console.log("I'm anonymous, self-invoking and wrapped in parenthesis just for clarity");
})()

有一篇关于自我调用函数here的简短pdf文章和一篇关于匿名函数的好文章here

Answer 3

在第一个示例中，您可以在JavaScript控制台中设置变量first。

在自调用函数中，var second受函数＆＃34; wrapper＆＃34;的保护，并且不能被外部JavaScript控制台修改。这种功能称为匿名函数，因为它没有名称（与function doStuff()不同）。

通常，最好使用自调用函数编写代码，因为匿名函数内的变量将保持在该范围内，而不会传播到全局范围。

Javascript自调用函数vs <script>标记直接放在HTML元素</script>之后

3 个答案: