JavaScript中语句与函数的执行辨析

程序员文章站 2022-04-06 08:11:54

...

文章出自个人博客https://knightyun.github.io/2018/05/23/js-anonymous-function，转载请申明。

Javascript代码中，语句和函数以及匿名函数的执行存在一些区别，所以在编写过程中也存在一些“坑“。

script 中的语句

html文档中的javascript语句是写在 <script></script> 中的，每条语句末尾需要添加分号 ;，表示此条语句执行结束。例如下面的代码：

<script>
    var x = 9;
    alert(x);
</script>

文档加载到这块代码区域时，就会立刻执行这两条语句，即弹出提示框为x的值，但是如果把语句换成函数定义，代码如下：

<script>
    var x = 9;
    function fx()
    {
        alert(x);
    }
    fx();
</script>

这时第一行语句会被执行，第二至五行是函数定义，并不会执行这个函数，直到最后一行语句才会真正执行这个定义过的函数。

如果需要立刻执行函数的话，就需要使用匿名函数了。所谓匿名函数，顾名思义，即不会给这个执行的函数定义“函数名”，而且是一个立即执行的语句。格式如下：

<script>
    var x = 9;
    (function(){
        alert(x);
    })();
</script>

注意代码中的三个括号的位置，以及最后跟的那个分号，表示这是一个立即执行的语句。

当然匿名函数也能传递参数，例如：

<script>
    (function(var x){
        alert(x);
    })(9);
</script>

效果和上面一样。

但有时又需要不立即执行的函数，例如：

<script>
    setTimeout(function(){
        var x = 9;
        alert(x);
    }, 2000);
</script>

效果与下面代码一样：

<script>
    var x = 9;
    setTimeout("alert(x)", 2000);
</script>

这是Javascript中的延时函数，表示2秒后弹出提示。setTimeout() 自身就是一个函数，里面的 “alert(x)” 是这个函数的一个参数，即一个加引号的语句。便于理解，可以写成这样：

setTimeout("alert();", 2000);

这样写并不会出错。

所以这个函数 setTimeout() 的参数是一个不用立即执行的匿名函数 function(){}，也可以是一个语句块，从而进行参数传递。

通俗讲，这里加引号的语句块相当于不加引号的匿名函数。

标签属性中的语句

在 html 标签中也能使用语句，通常用于设置元素的属性。

先对比区分以下代码：

<script>
    function fx()
    {
        alert();
    }
</script>

<button onclick="alert()">Button1</button>

<button onclick="fx()">Button2</button>

<button onclick=fx()>Button3</button>

<button onclick=(function(){alert();})()>Button4</button>

<button onclick="(function(){alert();})()">Button5</button>

<button onclick=function(){alert();}>Button6</button>

<button onclick="function(){alert();}">Button7</button>