JavaScript：函数声明与函数表达式？

Question

为什么这个是无效语法呢if(condition){function sayHi(){alert("Hi!");}}else{function sayHi(){alert("Yo!");}}而下面这个确是有效的var sayHi;if(condition){sayHi=function sayHi(){alert("Hi!");};}else{sayHi=function sayHi(){alert("Yo!");};}

Answer 1

javascript虽然是解释执行的语言，但也会进行预编译。

123456789

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

这种形式，JS引擎在预编译的过程中会注册方法到window对象下，就是window.sayHi。

而不会顾及if else条件，导致重复的sayHi方法被注册，在这种情况下是无效语法。

12345678910

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

而下面这种是作为一个 变量（而非函数function），变量是可以被重复赋值的，所以语法不会有问题。

不知道有没有说清楚。

Answer 2

我只说第一个。

第一个语法上没什么问题，但是和浏览器解析js不同而获得意想不到的结果。

1. 在前面调用。

1234567891011

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

这种时候除了firefox会报错，其他的浏览器会弹出“Yo!"。

2. 在后面调用

12345678910

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

firefox会弹出"Hi!"，其他的浏览器会弹出"Yo!"。

这里firefox会出现这种情况是因为firefox会把if里面的function定义当作表达式来处理。

MDN的原文

Functions can be conditionally declared. That is, a function definition can be nested within an if statement. Technically, such declarations are not actually function declarations; they are function expressions.

所以这种不兼容的方法不要使用。

Answer 3

function sayHi(){
alert('hi')
}
function sayHi(){
alert('Yo')
}

你写的第一个无效那个，等于分开写，下面的就会把上面的覆盖掉，只显示下面的了