为什么要将函数声明分配给命名变量

Why would I assign a function declaration to a named variable?

本文关键字:变量 分配 声明 函数 为什么      更新时间:2023-09-26

编辑:这不是将函数声明分配给命名变量 - 检查接受的答案。保持标题不变,因为其他人可能会犯和我一样的错误。


在阅读Paul Irish的无限滚动jquery插件代码时,我一次又一次地绊倒了以下模式:

...
_create : function infscr_create (options, callback) { /* ... */ },
...

这样做而不是这样做有什么好处:

...
_create : function (options, callback) { /* ... */ },
...
这样做

的好处(称为"命名函数表达式")是函数具有实际名称。在第二个版本中,该属性具有名称,但函数没有。为函数提供实际名称有助于工具帮助您(调用堆栈列表、断点列表等)更多: 匿名鼠匿名

它的缺点是它在某些损坏的JavaScript引擎中会出现意想不到的结果,例如IE8及更早版本中的引擎。在IE8及更早版本中,Paul Irish的版本在两个完全不同的时间创建了两个独立的函数。但这不是真正的问题,除非您保留并使用对两者的引用,并期望它们是相同的函数(例如,在挂接和取消挂钩事件处理程序时)。鉴于是保罗,我猜他肯定不会那样做。


重新你的问题标题:请注意,它是一个函数声明,但你可以原谅它的想法,因为它看起来几乎完全像一个。这是一个函数表达式。函数声明和函数表达式发生在完全不同的时间,并且对它们的创建范围有不同的影响。

只是为了完整起见:

// This is a function declaration -- note that it's not a "right-hand
// value", e.g., we're not using the result of it immediately (via an
// assignment, a property initializer, calling it, or passing it into
// a function as an argument -- none of those).
//
// Declarations happen upon entry to the scope (not as part of step-by-
// step code). The function's name is added to the scope in which it's
// declared. Declarations are illegal inside branches (`if`, `try/catch`,
// `for`, etc.), but some engines will rewrite them as expressions for
// you if you do that. Others will not, they'll just always declare the
// function regardless of whether the code was reached. So don't do that.
function foo() {
}
// These are all anonymous function expressions. The function in the
// expression has no name, although some debuggers are pretty smart
// about looking at the expression and (where they can) listing a
// kind of pseudo-name for the function. Others are not that smart,
// which is why I avoid anonymous functions.
//
// Expressions happen when they're reached in step-by-step code.
var f = function() { };
var obj = {
    prop: function() { }
};
doSomethingCoolWithAFunction(function() { });
(function() { })(); // Call it immediately
!function() { }();  // Call it immediately
~function() { }();  // Call it immediately, there are a few variants
// These are all *named* function expressions.
//
// Since they're expressions, they happen when they're reached in the
// step-by-step code. The function's name is NOT added to the containing
// scope (except by engines with bugs).
//
// These are the same examples as above, but with a name. No other changes.
var f = function foo() { };
var obj = {
    prop: function foo() { }
};
doSomethingCoolWithAFunction(function foo() { });
(function foo() { })(); // Call it immediately
!function foo() { }();  // Call it immediately
~function foo() { }();  // Call it immediately, there are a few variants
  1. 该函数有一个名称,而不是匿名函数;这显示在调试跟踪中,使调试更容易。
  2. 该函数可以通过调用 infscr_create() 来调用自身