大家都知道以下两种定义function的方式
//定义function的第一种方式 var fun1 = function() { alert("fun1"); } //定义function的第二种方式 function fun2() { alert("fun2"); }
那我们平时使用,用哪种方式了?大多数情况推荐第一种方式,但是看看下面这种情况
<!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) { event = 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>
为什么发生了这种情况?我们添加以下代码:
window.onload = mychange; alert(mychange);
这时窗口显示undefined!所以根本不可能往下执行。所以从这点可以分析出,javascript解释器是按前后顺序边解释边执行的。
那用第二种方式为什么可以?因为用第二种方式定义的function,会最先初始化,就类似于java中static属性。
看到这,新的问题来了,上面例子中的show方法,为什么没有问题?
因为调用mychange方式,是在window完成加载后才执行的,所以show已经初始化了,我们最后来看下顺序:
1、解释mychange方法
2、解释window.onload = mychange,发现调用的是onload方法,所以此处暂停,继续往下解释
3、解释var show 这段script,并加载window中的所有内容
4、加载完成,执行mychange方法