Question

我遇到了以下javascript：

<body>         
  <script type="text/javascript">
    (function() {
        alert('test');
        })();
  </script>

我很好奇在函数内部使用代码的目的是什么？如果只是这样写的话，这不会做同样的事情：

<body>         
  <script type="text/javascript">
       alert('test');
  </script>

Answer 1

通常这用于创建私有范围，并且不会污染全局范围。然而，在这种情况下，没有任何好处。

示例：

(function() {

    var counter = 0;

    $('#elem').click(function() {
         counter += 1;
         alert('#elem has been clicked ' + counter + ' times!');
    });

}());

这里计数器变量对封闭函数内部的代码是私有的。封闭函数中定义的其他函数可以访问这些变量（它们关闭变量;它们是闭包）。

这通常称为 Immediately Invoked Function Expression

Answer 2

它通常用于确保代码中使用的所有变量仅从此代码片段中获取其值 - 局部范围。它们忽略了在代码片段之外定义的变量。

var a = 10;
(function() {
    alert(a); // undefined
    var a = 5;
    alert(a); // 5
    })();

它的另一个主要用途是确保代码在一个Javascript库（例如jQuery）中工作，即使页面上有多个库（例如Prototype，Mootools）也是如此。你会做点像......

(function($) {
    alert('test');
    // You can now use the jQuery $ in here
    // And not worry about the Prototype $ being used instead
    })(jQuery);

通过将jQuery对象传递给函数，它获得了$的局部范围变量名，它将优先于全局范围的Prototype $（完全具有可用的方法不同。）

Answer 3

在这种情况下，是的。但

将代码置于函数内部，然后立即执行它，是隔离变量的一种方法，因为JavaScript实际上只有两个范围，全局和函数。如果在alert之前定义了一个变量，比如说，将其全部保存在另一个函数中会创建一个新的范围，从而防止删除具有相同名称的全局变量。

Answer 4

在这种情况下，它没有做太多。 alert("test")无论如何都会运行，不会被重复使用。

但更一般地说，通过将JavaScript（通常是整个文件）包装在匿名函数中，可以防止变量和函数污染全局范围，这有助于避免与其他代码冲突。

More info here

Answer 5

在这里，我向您展示了为什么您可以选择带警报的功能。我希望人们知道他们点击我的按钮时他们只能点击一次，所以我添加了一个提醒。我正在创建的功能（一个添加投票的按钮，然后显示投票数），警报只是一个补充。

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Vote!</title>


<script type="text/javascript">

function countClicks() {
var x = 0;


x += 1
document.getElementById( "counting" ).innerHTML = x;

var clickLimit = 1; //Max number of clicks
if(x>=clickLimit) {

 alert('you can only click once')
            }
else
{
    ClickCount++;
    return true;
}
}

</script>

</head>
<body>

<div style="margin-left:100px;">
<input type="button" value="VOTE" name="clickOnce" onclick="return countClicks();" />
<div id="counting"></div>
</body>

</html>

这个javascript的目的是什么？

5 个答案: