javascript - 为什么这个命名的匿名js函数在定义之前就可以工作？

Question

我有一个简单的Gulpfile，其中定义了一个任务。在 Gulp 任务之后定义了一个命名的匿名函数。该任务使用此函数，并且在我期望得到 undefined is not a function 时正在工作，但我没有。这是代码:

gulp.task('bower', function() {
  var bowerDir = 'bower_components';
  fs.readdir(bowerDir, function(err, dirs) {
    _.each(dirs, function(dir) {
      var directory = dir;
      fs.stat(path.join(bowerDir, dir), function(err, stats) {
        if(stats.isDirectory()) {
          listing('bower_components');
        }
      });
    });
  });
});

var listing = function(dir) {
  console.log(dir);
};

请解释一下为什么它有效？

Answer 1

gulp.task()、fs.readdir() 和 fs.stat() 都是异步函数。他们稍后而不是立即调用回调函数。这意味着定义 listing 之后的代码有机会在实际调用回调之前运行。因此，listing 是在实际使用之前定义的。

我自己并不建议这是一种好的编码方法，因为你依赖于事物的时机。

<小时/>

如果您像这样定义了 listing 函数:

function listing(dir) {
  console.log(dir);
}

然后，您就不会依赖于计时，因为像这样的所有静态定义的函数都会首先被解析并提升到它们定义的范围的顶部，因此无论计时如何，在该范围中始终可用。

<小时/>

仅供引用，如果您确实想向自己展示这一点，您可以添加此日志记录以查看实际的时间和顺序:

function logTime(msg) {
    console.log((new Date()).getTime() + ": " + msg);
}

logTime("start");
gulp.task('bower', function() {
  var bowerDir = 'bower_components';
  fs.readdir(bowerDir, function(err, dirs) {
    _.each(dirs, function(dir) {
      var directory = dir;
      fs.stat(path.join(bowerDir, dir), function(err, stats) {
        if(stats.isDirectory()) {
          logTime("about to call listing()");
          listing('bower_components');
        }
      });
    });
  });
});

logTime("about to define listing");
var listing = function(dir) {
  logTime("listing() called");
  console.log(dir);
};