JavaScript | 函数定义的两种方法；预编译与执行

HTML5学堂（码匠）：在JavaScript当中，函数的定义有两种常见方法，这两种方法有何不同？与这种不同点息息相关的“预编译与执行”又是什么意思？

1.如何定义函数

方法1：函数声明

方法2：函数表达式，又叫函数字面量

2.声明函数的代码实例

2.1.函数声明

基本语法

function functionName(arg0, arg1, ..., argn) {
    // 函数体 - HTML5学堂
}

代码范例

2.2.函数表达式（函数字面量）

基本语法

var functionName = function(arg0, arg1, ..., argn) {
    // 函数体 - HTML5学堂
};

代码范例

3.两种声明方法的不同点比较

在JavaScript运行过程中分为编译和执行两个阶段，在编译阶段解析器会先读取函数声明，并使其在执行任何代码之前可以访问；

因此，对于“函数声明”，在执行代码之前，函数就会先被读取，因此，在开发时可以把函数声明放在调用语句的后面。

但是，对于“函数表达式”，则必须等到执行阶段解析器执行到它所在的代码行时，才会真正被解释执行。

相关知识 - 预编译与执行

预编译期与执行期

JS的解析过程分为两个阶段：预编译期与执行期。

预编译期JS会对本代码块中的所有声明的变量（var声明的变量）和函数进行处理，但需要注意的是此时处理函数的只是声明式函数，而且变量也只是进行了声明但并不进行赋值。

代码范例：

代码运行结果

undefined 'HTML5学堂(码匠)'

代码解析

预编译时，对声明的变量开辟了内存空间，但是没有赋值，所以变量里面的值是undefined。执行期的时候，代码是从上往下执行，没有对第一个username进行赋值，所以第一个username输出undefined。

第二个username会输出'HTML5学堂(码匠)'，是因为代码执行到var a = 'HTML5学堂(码匠)'; 的时候为username进行赋值了，覆盖之前undefined的值。

Plus

JS引擎是按照代码块（<script></script>）来进行预处理和执行的，也就是说预处理的只是当前执行代码块的声明函数和变量。