javaScript函数声明方式对执行顺序的影响

本篇文章基于

<了解javascript中函数执行顺序 --羽翼飞扬>

http://www.cnblogs.com/yuyifeiyang/p/3540673.html

 

在看本篇前可以先看上文. 

由于他的分析过于差,我在本文重新总结:

 

### 函数有两种声明方式 

1.普通的函数声明

function test(n1,n2){return n1+n2;}

2.使用变量初始化函数

var test=function(n1,n2){return n1+n2;};

3.使用Function的构造方法(PASS)

 

对于前两种方式, 第一种才是标准的声明方式,第二种仅是JavaScript中对象声明的扩展,

因此,对于第二种方式,需要将其理解为对象而非函数

 

此为前言

###  准则一  JS中函数的适用范围是JS的任意位置

参见:http://www.w3school.com.cn/js/js_functions.asp 中:

<<可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。>>

 

### 准则二 JS是解释型语言,会先预编译,函数最先,其次逐行解释

上文说的方式二为对象,故语句

var test=function(n1,n2){return n1+n2;};

会在 function test(n1,n2){return n1+n2;}执行后逐行编译

 

基于上两个准则, 理解起http://www.cnblogs.com/yuyifeiyang/p/3540673.html 中的案例就完全没难度了

 

 

#### 代码分析 

first

<script language="JavaScript" type="text/javascript">
function myFn(){
　　alert('Fn1');
};

myFn();

function myFn(){
　　alert('Fn2');
};

myFn();
</script> 

这里myFn依次编译, Fn2 覆盖Fn1

结果是Fn2,Fn2

 

second

<script type="text/javascript" type="text/javascript">
function myFn(){
　　alert('Fn1');
};
myFn();
</script>

<script type="text/javascript">
function myFn(){
　　alert('Fn2');
};
myFn();
</script> 

这里是两个js文件,故互不影响 

结果是Fn1,Fn2

 

third

<script language="JavaScript" type="text/javascript">
var myFn = function(){alert('Fn1');};
myFn();
myFn = function(){alert('Fn2');};
myFn();
</script> 

这里先解释语句var myFn = function(){alert('Fn1');};

然后再对对象myFn赋值,

故结果为Fn1,Fn2

注意这里myFn = function(){alert('Fn2');};是赋值语句,而非函数声名语句哦

 

fourth

<script language="JavaScript" type="text/javascript">
function myFn(){alert('Fn1');};
myFn();

myFn = function (){alert('Fn2');};
myFn();
</script>

这里Fn1先预编译, 第一个myFn()输出Fn1,

然后对myFn赋值,第二个myFn()输出Fn2

 

fifth

<script language="JavaScript" type="text/javascript">
var myFn = function(){alert('Fn1');};
myFn();
function myFn(){alert('Fn2');};
myFn();
</script>

这里函数声名 var myFn = function(){alert('Fn1');}; 直接覆盖了函数的声明

故结果为Fn1.Fn1

剩下两个案例就不分析了.

因为打字累了