简析JavaScript中的Function类型（二）——函数声明与函数表达式的区别

最新推荐文章于 2025-08-23 02:53:08 发布

weixin_33901641

最新推荐文章于 2025-08-23 02:53:08 发布

阅读量141

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/bob1900/blog/3020048

本文探讨JavaScript中函数声明与函数表达式的区别，通过实例演示两者的执行时机不同，解析函数声明提升机制，并讨论两者语法上的等价性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

在简析JavaScript中的Function类型（一）——函数名是指针中我们提到函数有三种定义方式：函数声明、函数表达式、使用Function构造函数。其中，函数声明和函数表达式是比较常用的方式，本篇文章就来讲一下二者的区别。

先来看下面这段代码：

console.log(sum(1, 2));// 3
function sum(num1, num2){
  return num1 + num2;
}

先打印调用sum的结果，然后声明了sum，按照通常的编程思路来看，这种写法有点奇怪，我们知道在编程中有三种基本结构：顺序结构、选择结构、循环结构。所谓顺序结构就是代码按照书写的顺序从上到下依次执行；选择结构就是if判断等，根据不同的情况执行不同的代码；循环结构如for循环等，在一定条件下反复地执行某段代码。

上面的这段代码明显是顺序结构，从上到下依次执行，按理说执行第一行就应该报错：诸如sum未定义之类。然而为什么还能正确地打印结果呢？

现在我们将上面的例子改为函数表达式的语法来看下：

console.log(sum(1, 2));//Uncaught TypeError: sum is not a function
var sum = function(num1, num2){
  return num1 + num2;
};

发现报错了，提示sum不是一个函数，正是我们期望的结果，那为什么函数声明会违背顺序结构呢？

原来，JavaScript引擎在向执行环境中加载数据时，对函数声明和函数表达式并非一视同仁。它会率先读取函数声明，并使其在执行任何代码之前可用；至于函数表达式，则必须等到引擎执行到它所在的代码行，才会真正被解释执行。

在执行代码之前，JavaScript引擎读取并将函数声明添加到执行环境中，使之变为可让其他代码访问的状态，这个过程称为函数声明提升。对于函数表达式，没有函数声明提升。上例中，在执行到函数所在行的语句之前，变量sum中不会保存有对函数的引用，于是报错；而且，由于第一行代码就报错，所以实际上也不会执行到下一行。

因此，运行这两段代码就出现了我们看到的样子。

除了什么时候可以通过变量访问函数这一点区别之外，函数声明与函数表达式的语法其实是等价的。

另外也可以同时使用函数声明和函数表达式：

console(sum(1, 2));//Uncaught TypeError: sum is not a function
var sum = function sum(num1, num2) {
  return num1 + num2;
};

这等同于函数表达式，也不会进行函数声明提升。不过，这种写法在Safari中会导致错误。

转载于:https://my.oschina.net/bob1900/blog/3020048