在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方法。