js 自定义function函数的二种方法与区别

发布时间:2020-08-25编辑:脚本学堂
本文介绍下,在javascript中定义函数function的两种方法,并剖析了二者之间的区别,有需要的朋友,可以看看,希望对大家有所帮助。

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>

添加以下代码:

复制代码 代码示例:
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方法。