在javascript中,定义函数function,有两种定义方式。
例如:
<script language="javascript">
//定义function的方式一
var fun1 = function() {
alert("fun1");
}
//定义function的方式二
function fun2() {
alert("fun2");
}
</script>
对于以上二种方式,推荐使用第一种,这也是大家多在使用的一种方式。
不过,看了下面的例子,你又该如何取舍呢?
<!DOCTYPE html>
<html>
<head>
<title>event.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script>
window.onload = mychange;
//此处用第一种方式,不能执行这个function
// var mychange = function() {
// alert("hi");
// var ll = document.getElementsByTagName("li")
// alert(ll.length);
// for(var i=0,len=ll.length;i<len;i++) {
// alert(ll[i].innerHTML);
// ll[i].onclick = show;
// }
// }
//用下面的方式,正常执行
function mychange() {
alert("hi");
var ll = document.getElementsByTagName("li")
alert(ll.length);
for(var i=0,len=ll.length;i<len;i++) {
alert(ll[i].innerHTML);
ll[i].onclick = show;
}
}
var show = function(event) {
eventevent = event||window.event;
alert(event.type);
alert("hello"+this.innerHTML);
}
</script>
</head>
<body>
<ul>
<li>apple</li>
<li>pear</li>
<li>orange</li>
</ul>
</body>
</html>
添加以下代码:
此时窗口显示undefined!
因此,根本不可能往下执行。
基于这点,我们分析javascript解释器是按前后顺序边解释边执行的。
第二种方式定义的function,会最先初始化,就类似于java中static属性。
那么其中的show方法,为什么没有问题?
因为调用mychange方式,是在window完成加载后才执行的,所以show已经初始化了。
以上代码的具体顺序是这样的:
1、解释mychange方法。
2、解释window.onload = mychange,发现调用的是onload方法,暂停,然后继续向下解释执行。
3、解释var show 这段script,并加载window中的所有内容。
4、加载完成,执行mychange方法。