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

Question

这个问题在这里已经有了答案:





What is the (function() { } )() construct in JavaScript?

(29 个回答)


7年前关闭。




使用脚本标签:

<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>

自调用函数和<script>在用法上有什么区别标签放置在 html 元素之后。我一直在调试以找到差异。但他们的行为似乎是一样的。或者这只是关于好/坏的做法？

Answer 1

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

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