JavaScript 中的函数表达式与声明之间有什么区别?函数声明函数表达式立即调用的函数表达式 (IIFE)结论

2022-08-29 23:07:42

以下代码行之间有什么区别?

//Function declaration
function foo() { return 5; }

//Anonymous function expression
var foo = function() { return 5; }

//Named function expression
var foo = function foo() { return 5; }
  • 什么是命名/匿名函数表达式?
  • 什么是声明的函数?
  • 浏览器如何处理这些结构?

对类似问题(var functionName = function() {} vs function functionName() {}) 的回答没有完全正确吗?


答案 1

它们实际上非常相似。你如何称呼他们是完全相同的。不同之处在于浏览器如何将它们加载到执行上下文中。

函数声明在执行任何代码之前加载。

仅当解释器到达该行代码时,才会加载函数表达式。

因此,如果您尝试在加载函数表达式之前调用它,则会收到错误!如果改为调用函数声明,它将始终有效,因为在加载所有声明之前,无法调用任何代码。

示例:函数表达式

alert(foo()); // ERROR! foo wasn't loaded yet
var foo = function() { return 5; } 

示例:函数声明

alert(foo()); // Alerts 5. Declarations are loaded before any code can run.
function foo() { return 5; } 


至于你问题的第二部分:

var foo = function foo() { return 5; }真的和另外两个一样。只是这行代码曾经在Safari中引起错误,尽管它不再存在。


答案 2

函数声明

function foo() { ... }

由于函数提升,以这种方式声明的函数可以在定义之后和之前调用。

函数表达式

  1. 命名函数表达式

    var foo = function bar() { ... }
    
  2. 匿名函数表达式

    var foo = function() { ... }
    

foo()只能在创建后调用。

立即调用的函数表达式 (IIFE)

(function() { ... }());

结论

Douglas Crockford建议在他的《JavaScript: The Good Parts》一书中使用函数表达式,因为它清楚地表明这是一个包含函数值的变量。foo

好吧,就个人而言,除非有表达的原因,否则我更喜欢使用声明。