JavaScript函数声明与函数表达式的区别分析

引言：函数定义的两种常见形式

在编写JavaScript代码时，开发者通常习惯于使用 `function fn () {}` 的语法来定义函数。然而，在阅读高质量插件源码时，常会看到 `var fn = function () {}` 这种写法。这两种方式在行为上究竟有何不同？本文将深入探讨这一关键概念，厘清函数声明的本质。

函数声明：变量提升机制

函数声明

函数声明示例代码

function fn () {
console.log('fn 函数执行..');
// code..
}

上述代码定义了一个名为 `fn` 的函数。这里有一个值得思考的问题：如果在定义该函数的代码行之前调用它，程序会正常执行还是抛出错误？

fn(); // 在之前调用我们声明的fn函数 function fn () { console.log('fn 函数执行..'); // code..}

控制台输出结果：

是的，此时 `fn` 函数是可以被调用到的。以下总结其背后的原因。

总结：

1：此时 `fn` 函数是变量的结果，默认存储在全局上下文的变量中(可用 window.函数名 来验证)

2：此方式为函数声明，在进入全局上下文阶段创建，代码执行阶段，它们已经可用。ps：javaScript在每次进入方法时都会先初始化上下文环境（由全局 → 局部）

3：它可以影响变量对象（仅影响存储在上下文中的变量）

函数表达式：赋值与执行时机

函数表达式

函数表达式示例代码

var fn = function () {
console.log('fn 函数【表达式】声明执行..')
// code..
}

上述代码定义了一个匿名函数，并将其引用赋值给变量 `fn`。

接下来，我们在该表达式声明的代码行之前和之后分别调用一次，观察控制台的输出结果。

// 为了清晰的看到控制台的输出，我们在各自调用前后做个标记，增加可读性。
console.log('之前调用开始..');
fn();
console.log('之前调用结束..');
var fn = function () {
console.log('fn 函数【表达式】声明执行..')
// code..
}
console.log('之后调用开始..');
fn();
console.log('之后调用开始..');

控制台打印结果：

可以看到代码在执行到第一次调用 `fn()` 函数的时候，提示：`fn is not a function` （fn 不是一个方法），遇到错误而终止运行。

这说明在第一次调用 `fn()` 的同时，`var fn` 变量没有做为全局对象的一个属性而存在，且 `fn` 引用的匿名函数上下文也没有被初始化，所以在他之前调用失败。

// 现在先把之前的调用逻辑给注释掉，再看下控制台的输出
// console.log('之前调用开始..');
// fn();
// console.log('之前调用结束..');
var fn = function () {
console.log('fn 函数【表达式】声明执行..')
// code..
    }
console.log('之后调用开始..');
fn(); // 在表达式之后调用
console.log('之后调用开始..');

控制台打印结果：

可以看出，在该表达式函数之后来调用是可以的。以下总结其背后的原因。

总结：

1：首先变量本身不做为一个函数存在，而是一个匿名函数的引用（值类型的不属于引用）

2：在代码执行阶段，初始化全局上下文时，它没有被做为全局的一个属性而存在，所以不会造成变量对象的污染

3：该类型的声明一般在插件的开发比较常见，也可做为闭包中回调函数的调用

因此，`function fn () {}` 并不等于 `var fn = function () {}`，两者存在本质区别。

以上就是本文的全部内容了，思路很清晰，对比也很明确，是篇非常不错的文章，小伙伴们一定要仔细研读下