Javascript自调用函数vs<；脚本>；直接放在HTML元素后面的标记

使用脚本标记：

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

我是第一个
var first=document.getElementById（“first”）；
console.log（第一）；

自调用函数：

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

我是第二名
（功能（）{
var second=document.getElementById（“second”）；
console.log（第二个）；
})();

---

self-calling函数和html元素后面的

标记在用法上有什么区别。我一直在调试以找到不同之处。但他们的行为似乎是一样的。或者这仅仅是一种好的/坏的做法？

自动执行函数创建一个新的内部作用域，其中包含

第二个

变量，并防止它泄漏到全局命名空间中。但是，普通

块的

第一个
变量将被添加到全局范围中

请记住，单个
script
块没有自己的作用域，它们都在相同的全局作用域内运行，这是脚本互操作所必需的。
在第一个示例中，您可以在JavaScript控制台中手动上载变量
first

在自调用函数中，
var second
受函数“wrapper”的保护，不能由外部JavaScript控制台修改。这种函数称为匿名函数，因为它没有名称（与
函数doStuff（）
不同）

通常，最好使用自调用函数编写代码，因为匿名函数中的变量将保持在该范围内，而不会向上传播到全局范围。
您发布的两个示例之间的区别本质上是，一个是在函数中存储变量（第二个变量），另一个不是（第一个变量）

在第二个示例中，您将元素对象分配给一个匿名自调用函数中的变量（没有名称归属于它，因此它的值永远不会存储，下面的括号附加在调用该函数的末尾）

命名变量的一个示例是

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

匿名函数是一个没有名字的函数，即使它被分配给变量
anon_函数
its'still anonymous

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

上述函数的返回值存储在
anon\u函数
变量中

后面的括号告诉函数立即执行，就像调用命名函数一样

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

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

“建议”使用括号括起整个函数，以帮助程序员区分正常函数：

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

有一篇关于自调用函数的简短pdf文章和一篇关于匿名函数的好文章
它们实际上是相同的。唯一的区别是，在第二种情况下，
second
不会污染全局范围。使用Firefox中的Firebug，我能够在函数外部读取
a
的值。