js 自定义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>
添加以下代码：
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方法。
您可能感兴趣的文章：
js 自定义function函数的二种方法与区别
jquery与js函数冲突的两种解决方法
解决jquery中美元符号命名冲突问题
JQuery的$命名冲突详细解析
jQuery与其它库冲突的解决方法
用示例说明filter()与find()的用法以及children()与find()的区别分析
理解js中undefined与null的区别
Jquery 常用方法经典总结
jQuery技巧大放送 学习jquery的朋友可以看下
jQuery 技巧小结