Question

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

为什么这个是无效语法呢
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虽然是解释执行的语言，但也会进行预编译。

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

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

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

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

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

不知道有没有说清楚。

Answer 2

当然无效了，定义函数/对象有两种方式，一般来说效果是差不多，但是也有一点点区别：

方式1，

//这种定义，浏览器首先会把所有的函数定义先预留
function sayHi(){
    alert("Hi!");
}

方式2，

//这种定义，浏览器运行到这一行，才会定义函数
var sayHi = function(){
    alert("Hi!");
}

Answer 3

我只说第一个。

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

1. 在前面调用。

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

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

2. 在后面调用

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 4

第一段代码只是声明一个函数，并不是一个可执行的语句，而第二个是声明函数并把它赋值给一个变量，所以合法

Answer 5

实在不明白你这段代码的目的。

如果你只是需要在不同的condition提示不同的alert, 那么只需要如下就可以了。
if(condition){
alert("Hi!");
}else{
alert("Yo!");
}

如果你需要在不同的condition定义不同的SayHi()函数。那么很明显，只有下面的才是正确的。
上面的做法不管从任何角度看都是乱来。 如果JS支持把局部定义默认为全局的(PHP可以)，那么上面这样就叫重复定义。如果JS不支持把局部当全局用，那么你上面的做法跳出if/else的范围，此函数为未定义(不存在).