函数表达式和函数声明区别与对比

Javascript中两者的作用都是为了创建函数,写法如下:

图1-1

两种方法都创建了一个函数,且命名为foo,但是二者还是有区别的。JavaScript 解释器中存在一种变量声明被提升(hoisting)的机制,也就是说变量(函数)的声明会被提升到作用域的最前面,即使写代码的时候是写在最后面,也还是会被提升至最前面。

名词释义:

1.变量声明提升: 通过var声明的变量在代码执行之前被js引擎提升到了当前作用域的顶部。

2.函数声明提升: 通过函数声明的方式(非函数表达式)声明的函数在代码执行之前被js引擎提升到了当前作用域的顶部,而且函数声明提升优先于变量声明提升。


注意:

1. 通过 var 声明的变量(包括通过函数表达式创建的函数)被提升的只是变量名,且被预解析为undefined;

2.通过函数声明创建的函数,被提升的是整个函数体;

3.两种提升都只发生在当前作用域内,提升位置为当前作用域最顶部;


图1-2

参考上图可以看到foo的声明是写在 alert 之后,仍然可以被正确调用,因为 JavaScript 解释器会将其提升到 alert 前面,而以函数表达式创建的函数bar则不享受此待遇。

那么bar究竟有没有被提升呢,其实用 var 声明的变量都会被提升,只不过是被先赋值为undefined罢了,所以第二个 alert 弹出了undefined。

小结:

相同点:两者都起到创建函数的作用;

不同点:JavaScript 解释器对两者的预解析方式不同;

参考链接:

https://libuchao.com/2012/06/25/function-declaration-vs-function-expression

https://dancon.gitbooks.io/git-books/content/js/essay/function_hoisting.html

推荐阅读更多精彩内容