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

23/05/2018 00:00

点击量：次

JavaScript

javascript函数

匿名函数

javascript语句

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”，然后就能发现规律了，属性所设置的值必须是能立即执行的语句块、函数或匿名函数，最后那两种情况是行不通的。

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

script 中的语句

标签属性中的语句

评论：