函数声明提升

1、函数的两种创建方式

• 函数声明
• 函数表达式

函数声明语法

f('superman');

function f(name){ 

  console.log(name);

}

运行上面的程序，控制台能打印出supemran。 

函数表达式语法

f('superman');

var f= function(name){ 

console.log(name);

}

运行上面的代码，会报错Uncaught ReferenceError: f is not defined(…),错误信息显示说f没有被定义。 

为什么同样的代码，函数声明和函数表达式存在着差异呢？ 

这是因为，函数声明有一个非常重要的特征：函数声明提升，函数声明语句将会被提升到外部脚本或者外部函数作用域的顶部（是不是跟变量提升非常类似）。正是因为这个特征，所以可以把函数声明放在调用它的语句后面。如下面例子，最终的输出结果应该是什么？：

var getName = function(){ 

console.log(2);

}

function getName (){ 

console.log(1);

}

getName();

可能会有人觉得最后输出的结果是1。让我们来分析一下，这个例子涉及到了变量声明提升和函数声明提升。正如前面说到的函数声明提升，函数声明function getName(){}的声明会被提前到顶部。而函数表达式var getName = function(){}则表现出变量声明提升。因此在这种情况下，getName也是一个变量，因此这个变量的声明也将提升到顶部，而变量的赋值依然保留在原来的位置。因此上面的函数可以转换成下面的样子:

var getName; //变量声明提升

function getName(){ //函数声明提升到顶部 

console.log(1);

}

getName = function(){ //变量赋值依然保留在原来的位置 

console.log(2);

}

getName(); // 最终输出：2

所以最终的输出结果是：2。在原来的例子中，函数声明虽然是在函数表达式后面，但由于函数声明提升到顶部，因此后面getName又被函数表达式的赋值操作给覆盖了，所以输出2。