javascript - jQuery fadeOut 回调函数 - 为什么本地函数不起作用而全局函数可以？

Question

我有一个简单的 twitter bootstrap 消息框架，我可以在上面编写内容，并带有一些小的 jQuery 效果。

首先，我淡出黑板，一旦它完成淡出，我就写下我想要的内容，然后他们再次淡入。

我有两个版本:

第一个，使用本地定义的函数:

function postMessage(message, context) {
    if(typeof context === 'undefined')
        context = "info";

    var newClass = "alert alert-" + context;
    var messageBoard = $("#messageBoard");
    // Fade out
    messageBoard.fadeOut('slow', postFadeOut);

    var postFadeOut = function() {
        alert("XX");
//      $(this).attr('class', newClass);
//      $(this).html(message);
//      // Fade in again
//      $(this).fadeIn('slow');
    }
}

它不会触发警报(“XX”)，但是:

function postMessage(message, context) {
    if(typeof context === 'undefined')
        context = "info";

    var newClass = "alert alert-" + context;
    var messageBoard = $("#messageBoard");
    // Fade out
    messageBoard.fadeOut('slow', postFadeOut);
}

function postFadeOut() {
    alert("XX");
//  $(this).attr('class', newClass);
//  $(this).html(message);
//  // Fade in again
//  $(this).fadeIn('slow');
}

将触发。为什么？

Answer 1

这是一个variable hoisting效果。

在 JavaScript 中，变量是提升的。这意味着在它们声明的范围内，它们可以在任何代码行中使用，即使是在该行之后声明的。然而，它们的值或初始化是按照代码编写的顺序发生的。例如:

alert(a);
var a = 'Some value';
alert(a);

如您所见，a 在第一个警报中可用(不会引发异常)，但它尚未初始化。

上面的代码在所有用途上都与:

var a;
alert(a);
a = 'Some value';
alert(a);

在第一个示例中，postFadeOut 变量是这样提升的，但在 .fadeOut 调用中它未初始化，其值是undefined .

第二个版本可以工作，因为函数在声明的范围内可用，无论代码顺序如何。这是因为引擎首先解析整个代码，“记住”该 channel 中的函数，然后才从第一行开始执行。