JS 函数揭秘 (1/6)

有关函数相关的话题在网上讨论的并不够多，因为它比较复杂，这也是为什么现在网上会存在如此多的误解。 在这片文章里面，我会试着从理论和实际出发，去总结有关函数的好的，坏的，丑陋的一面。

---

函数表达式 VS. 函数声明

在 ECMAScript 中，如果需要使用函数，最常用的两种方法就是通过函数表达式和函数声明。掌握它们区别非常重要，因为在JS 中两者的执行是有差别的，可惜很不爽，至少在看来， 两者之间的差别可以说是相当混乱，只有一件事是 ECMA 规范中讲清楚的----函数声明必须要有一个函数名(规范中称为 identifier (标识)），函数表达式可以忽略函数名：

FunctionDeclaration :
function Identifier ( FormalParameterList <opt> ){ FunctionBody }

FunctionExpression :
function Identifier<opt> ( FormalParameterList <opt> ){ FunctionBody }

我们可以仔细瞧瞧，当忽略函数名时，只能是函数表达式，这个是没有争议的，因为规范中有说，函数表达式可以忽略函数名，但是如果加上函数名呢？这两种方式一模一样，我们别人说这是一个函数声明，还是一个函数表达式呢？

区分函数表达式和函数声明

看起来 ECMAScript 判断两者的不同是基于整个上下文的，如果function foo () {} 是一行语句的某个部分，比如说赋值表达式的一部分，它应该是一个函数表达式，可以理解为当前赋值表达式有函数的参与。 如果function foo () {}被包含在一个函数体内或者直接暴露在最上层的作用域下，它就是一个函数声明。

function foo(){} // 声明，因为它暴露在全局作用域下
var bar = function foo () {} // 表达式，因为它是构成赋值表达式的一部分
 new function bar () {} // 表达式，因为它是 new 语句的一部分
 (funciton () {
     function bar () {} // 声明，因为它在函数体内
 })();

上面的例子有个需要留意的地方，(function () {})这个函数应该算作哪一种。可以明确的说它是一个函数表达式，因为前后的两个()括号。两个括号组成一个分组运算符，而分组运算符可以包含表达式的，所以按照上面的说明，它是一部分，是一个函数表达式(注意区分编程中的语句和表达式，参考文章 http://www.2ality.com/2012/09/expressions-vs-statements.html)，并且分组运算符也只可以包裹表达式。

区分清楚之后，来看他们之间的不同，首先在其他语句还没有执行之前，函数声明将会先被解析和执行。即便它的位置在整个页面资源的最底部，它会被在作用域中出现的时间将会先于其他的任何表达式。下面的例子演示了fn 函数声明的位置靠后，但是依然可以在声明的位置之前被调用。

alert(fn());
function fn () {
return 'hello world~"
}

另外一个绝对需要注意的特点，不要在条件语句声明函数，在不同的环境下，会有不同的处理结果，所以当遇到要依据不同条件来新建函数时，一定要使用函数表达式代替，看下面的例子：

// 绝对不要这样做，由于函数声明会在其他语句没有执行之前就声明完毕，所以这里的处理逻辑比较混乱
// 某些浏览器会直接使用第一个声明，返回 'first' 
// 某些会使用第二个声明 'second'

if (true) {
  function foo() {
    return 'first';
  }
}
else {
  function foo() {
    return 'second';
  }
}
foo();

// 当一定需要依据不同情况创建函数时，使用函数表达式的方法来代替
var foo;
if (true) {
  foo = function() {
    return 'first';
  };
}
else {
  foo = function() {
    return 'second';
  };
}
foo();