JavaScript 中语句与函数的执行辨析
source link: https://knightyun.github.io/2018/05/23/js-anonymous-function
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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>
猜一下哪个按钮点击无效……
答案是最后的“Button6”和“Button7”，然后就能发现规律了，属性所设置的值必须是能立即执行的语句块、函数或匿名函数，最后那两种情况是行不通的。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK