JavaScript--浅谈函数表达式

定义函数的方式:

函数声明:

sayHi(); //不会报错，在执行代码以前会先读取函数声明,也就是 函数声明提高

function sayHi(){

　　alert('Hi')

}

经过提高实际上是这样的:

//函数声明提高到顶部

function sayHi(){

　　alert('Hi')

}

sayHi(); //不会报错

 

函数表达式:

sayHi(); // 报错  

var sayHi = function(){

　　alert('Hi')

}

函数表达式实际上是建立一个匿名函数而后赋值给变量,经过提高应该是这样的:

//函数声明和变量声明都被提高到做用域顶部，函数优先

functionsayHi(){

　　alert('Hi')

}

//变量声明被提高到顶部

var sayHi;

sayHi(); // 报错  

//变量赋值被留在原地

sayHi = function(){

　　alert('Hi')

}

 

由于函数声明的提高行为，致使了咱们在旧版本的浏览器等执行环境上运行同一段代码会出现不一样的结果。(由于不一样的浏览器的提高规则不一样，有的浏览器不会提高if内部的函数声明)

var condition = true

if(condition){
function sayHi(){
    alert("Hi!");
    }
} else {
    function sayHi(){
        alert("Yo!");
    } 
}

sayHi()

View Code

这里是chrome等现代浏览器的执行结果，并不会提高if内部的函数声明

这里是ie7的执行结果，很明显，if内部的函数声明所有被提高了，提高了2次，第二次的提高将第一次的提高覆盖了，因此不管怎样都是定义函数为 alert('Yo')

 

 

 

而函数表达式的提高行为与函数声明的提高行为不一致，从而建议使用函数表达式来定义函数，而不是函数声明。(在旧版本浏览器中，如今的新版浏览器基本都修复了这个问题，只有在ie7等远古浏览器还遗留这些问题)

 

 1 var sayHi;
 2 
 3 var condition = true;
 4 if(condition){
 5  sayHi = function(){
 6     alert('Hi')
 7  }
 8 }
 9 else{
10  sayHi = function(){
11     alert('Yo')
12  }
13 }
14 
15 sayHi()

View Code

 不管是chrome仍是ie7均可以很好的获得咱们的预期效果