首先我们来了解一下函数声明与函数表达式的定义。 ### 函数声明一个标准的函数声明，由关键字function 、函数名、形参和代码块组成。
有名字的函数又叫**具名函数**。举个例子： ```javascript function quack(num) { for (var i = 0; i < num; i++) { console.log("Quack!") } } quack(3) ``` ### 函数表达式 **函数没有名称**，而且位于一条赋值语句右边，被赋给一个变量。
在语句（如赋值语句）中，以这样的方式使用关键function时，创建的是函数表达式。
没有名称的函数又叫**匿名函数**。举个例子： ```javascript var fly = function(num) { for (var i = 0; i < num; i++) { console.log("Flying!"); } } fly(3) ``` 无论你使用函数声明还是函数表达式，得到的都是函数。那么它们的区别何在呢？
仅仅是函数声明更方便，还是函数表达式有些独特之处使其很有用？
亦或是它们只是两种做相同事情的不同方式而已？乍一看，函数声明和函数表达式差别不大，但实际上它们存在根本性差别。
要明白这种差别，首先需要研究一下浏览器在运行阶段如何处理代码。
下面我举个例子，看看浏览器如何分析并执行网页中的代码。 #### 举例 ```javascript var migrating = true; var fly = function (num) { for (var i = 0; i < num; i++) { console.log("Flying!") } } function quack(num) { for (var i = 0; i < num; i++) { console.log("Quack!") } } if (migrating) { quack(4) fly(4) } ``` #### 分析浏览器如何执行代码 **第一步：分析函数声明**
在分析网页期间（执行任何代码之前），浏览器查找函数声明。找到函数声明时，浏览器创建相应的函数，并将得到的函数引用赋给与函数同名的变量。 ![](https://cdn.nlark.com/yuque/0/2020/png/532598/1584415316133-b63c8b07-f481-4dc9-9119-184bcf628c81.png#align=left&display=inline&height=325&name=image.png&originHeight=446&originWidth=973&size=76609&status=done&style=none&width=710) **第二步：浏览器执行代码**
处理所有的函数声明后，浏览器回到代码开头，开始按从头到尾的顺序执行代码。 ![](https://cdn.nlark.com/yuque/0/2020/png/532598/1584415796654-b1b86163-0423-423a-8313-c7cb1a1acc91.png#align=left&display=inline&height=330&name=image.png&originHeight=465&originWidth=971&size=78970&status=done&style=none&width=689) **第三步：继续执行**
处理完变量fly后，浏览器继续往下执行。接下来的语句是函数quack的声明，因为已经处理过了，所以浏览器跳过声明，接着执行后面的条件语句。 ![](https://cdn.nlark.com/yuque/0/2020/png/532598/1584416245865-a6d25a9f-8368-4e9f-aa95-024485bd0b00.png#align=left&display=inline&height=323&name=image.png&originHeight=452&originWidth=935&size=46316&status=done&style=none&width=669) 我们来总结一下，浏览器的执行过程。 1. 首先扫描代码，查找函数声明 1. 分析函数声明（存储该函数，并创建一个与函数同名变量来存储指向该函数的引用） 1. 处理完所有函数声明后，浏览器从头开始执行代码（按顺序处理各种函数变量） 1. 碰到函数表达式时，同函数声明，需存储该函数，并将指向该函数的引用赋给表达式左边的变量 #### 得出结论：函数声明与函数表达式的区别 ![](//static.xiedaimala.com/xdml/image/b9730adb-57fd-48c1-bf21-d4cd148d86f4/2020-3-17-12-4-14.png) ### 后记本文参考的相关文章： - 《Head First Javascript 程序设计》由于本人水平有限，如有描述不准确的地方请给我留言，欢迎交流~
本文为个人原创，转载请注明出处。

一个例子讲清楚函数声明和函数表达式