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

Javascript self calling function vs <script> tag placed directly after the HTML element

本文关键字：HTML 标签 元素 函数 调用 vs Javascript script      更新时间：2023-09-26

使用script标签:

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

Self-invoking功能:

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

自调用函数和放置在html元素后的<script>标签在用法上有什么区别?我一直在调试以寻找差异。但他们似乎表现得一样。或者仅仅是关于好习惯/坏习惯?

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

请记住，单个script块没有自己的作用域，它们都在相同的全局作用域内操作，这对于脚本的互操作是必要的。

你发布的两个例子之间的区别本质上是一个是存储变量(var秒)在一个函数和一个不是(var第一)。

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

一个命名变量的例子是…

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");
})()

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

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

在自调用函数中，var second受到函数"wrapper"的保护，不能被外部JavaScript控制台修改。这种函数被称为匿名函数，因为它没有名称(不像function doStuff())。

一般来说，最好使用自调用函数编写代码，因为匿名函数中的变量将留在该作用域中，而不会向上传播到全局作用域中。

相关文章：