function解析与JS预解析

function解析

一、定义函数的三种方法

1、function函数

function fn(x) {
	alert(x);
}

2、function构造函数

var fn = new Function('x','alert(x);')
var fn = new Function('alert(x);')  //与上面一种构造函数相似

3、函数字面量

var fn = function(x) {
	alert(x);
}

二、解析顺序

function函数：顺序解析；

function构造函数、函数字面量：顺序解析。

三、案例

 // 4 2 3 3 5 6
function f(){return 1;}             // 函数1     优先解析
alert(f());                         //返回值为4 说明第1个函数被第4个函数覆盖
var f = new Function("return 2;");  // 函数2 
alert(f());        				    //返回值为2 说明第4个函数被第2个函数覆盖
var f = function(){return 3;}       // 函数3 
alert(f());           				//返回值为3 说明第2个函数被第3个函数覆盖
function f(){return 4;}             // 函数4    优先解析 覆盖函数1
alert(f());           				//返回值为3 说明第4个函数被第3个函数覆盖
var f = new Function("return 5");   // 函数5 
alert(f());    						//返回值为5 说明第3个函数被第5个函数覆盖
var f = function(){return 6 ;}      // 函数6 
alert(f());       			 		//返回值为6 说明第5个函数被第6个函数覆盖

四、JS的预解析

JS的预解析主要有函数参数、函数声明、var变量声明。

函数声明优于变量声明是指函数声明可覆盖变量声明。

JS中语句执行的步骤：

1. 自身函数参数
2. 函数声明
3. var变量
4. 其他语句执行

例1:

function b(){
    console.log(a); // function
    var a = 10;
    function a(){};
    console.log(a);  // 10 
}
b();

具体执行过程：

1. 执行函数参数–>无参函数

2. 执行函数声明–>function a(){}

3. 执行var变量声明–>var a，与函数声明重名，被忽略

4. 最后执行其他语句

   ​ console.log(a); -->function

   ​ a = 10;

   ​ console.log(a) -->10

例2：

function d(){
    var a = 10;  
    console.log(a);  // 10
    function a(){};
    console.log(a);  // 10
}
d();

具体执行过程：

1. 执行函数参数–>无参函数

2. 执行函数声明–>function a(){}

3. 执行var变量声明–>var a，与函数声明重名，被忽略

4. 最后执行其他语句

   ​ a = 10;

   ​ console.log(a); -->10

   ​ console.log(a); -->10

例3：

(function(num){
    console.log(num); //100
    var num;
    console.log(num); //100
})(100);

具体执行过程：

1. 执行函数参数–>num=100

2. 执行函数声明–>无

3. 执行var变量声明–>var m，与第一步重名，被忽略

4. 最后执行其他语句

   ​ a = 10;

   ​ console.log(num) -->100

   ​ console.log(num) -->100

例4：

(function(num){
    console.log(num); // function
    var num;
    console.log(num); // function
    function num(){};
})();

具体执行过程：

1. 执行函数参数–>num=undefined

2. 执行函数声明–>function num(){} 覆盖了第一步

3. 执行var变量声明–>var m，与第一步重名，被忽略

4. 最后执行其他语句

   ​ console.log(num) -->function

   ​ console.log(num) -->function