javascript - 声明为参数时函数名称的可见性

Question

function foo() {
    ui.login.setClose(function closer() {
        ui.hideAll()
        ui.main.show()
    })
    ui.ask.setClose(closer) // <-- closer is not defined
    ui.adduser.setClose(closer)
}

我想知道为什么这不起作用？ function 关键字不是应该创建一个在当前函数 (foo) 主体中任何位置可见的名称吗？

Answer 1

你所拥有的称为命名函数表达式。 (不要在 IE8 或更早版本或其他一些相当旧的浏览器中使用它们。)它在几个方面与函数声明不同，其中之一是(在正确的实现上)函数的名称不会添加到由您创建。

在该示例中，您可能需要一个函数声明，如果您只想在 foo 内访问它，则可以在 foo 内:

function foo() {
    function closer() {
        ui.hideAll()
        ui.main.show()
    }

    ui.login.setClose(closer);
    ui.ask.setClose(closer);
    ui.adduser.setClose(closer);
}

或外部 foo(如果您希望在 foo 外部访问它):

function closer() {
    ui.hideAll()
    ui.main.show()
}
function foo() {
    ui.login.setClose(closer);
    ui.ask.setClose(closer);
    ui.adduser.setClose(closer);
}

以下是创建函数的三种主要方法(除了 Function 构造函数，几乎应该始终避免使用):

函数声明

看起来像这样:

// `foo` is in scope *and* ready to use here, even before the declaration

function foo() {
    // `foo` is in scope and ready here too
}

// `foo` is in scope and ready here too

特点:

1. 是否不作为分步代码的一部分进行处理；相反，它是在运行范围内的任何分步代码之前创建的。这意味着您可以在声明上方和下方编写的代码中使用上面的 foo。

2. 由于#1，函数声明不能​​位于控制结构内(例如 if、switch、for 等。 )，因为当函数在分步代码运行之前创建时，这是没有意义的。 (重要的是不要这样做，因为不同的浏览器以不同的方式处理无效的展示位置。)

3. 将函数名称放入函数声明出现的范围内。

4. 该函数有一个真实的名称，并且该名称位于该函数的范围内。

命名函数表达式

看起来完全一样，只是它写在需要表达式的地方，例如 = 的右侧(例如，赋值)或 : (在属性初始值设定项中)或作为函数的参数:

// `foo` is *not* in scope here

var x = function foo() {
    // `foo` is in scope here, refers to the function
};
var obj = {
    x: function foo() {
        // `foo` is in scope here, refers to the function
    }
};
bar(function foo() {
    // `foo` is in scope here, refers to the function
});

// `foo` is *not* in scope here

特点:

1. 它们作为分步代码的一部分进行处理，就像任何其他表达式一样。

2. 它们在现代浏览器(包括 IE9 及更高版本)上正常工作，但 there are bugs在 IE8 及更早版本中，以及其他一些相当旧的浏览器也存在错误( kangax wrote them up at the time )。

3. 作为表达式，它们有一个结果:函数引用。 (例如，这就是上面分配给 x 或传递给 bar 的内容。)

4. 它们的名称未添加到定义它们的范围中。

5. 该函数有一个真实的名称，并且该名称位于该函数的范围内(例如，用于递归)。

匿名函数表达式:

与命名函数表达式相同，但是，呃，没有名称:

var x = function() {
    // ...
};
var obj = {
    x: function() {
        // ...
    }
};
bar(function() {
    // ...
});

特点:

1. 它们作为分步代码的一部分进行处理，就像任何其他表达式一样。

2. 它们会产生一个函数引用(例如，这就是分配给 x 或传递给上面的 bar 的内容)。

3. 根据当前规范，该函数没有名称。然而，下一个规范 ES6 将让引擎在可能的情况下通过查看表达式来推断函数的名称。例如，在上面的例子中，分配给 x 的两个变量都将具有名称 x；传入 bar 的仍然是匿名的。