javascript - 我的函数无法访问其父闭包并且缺少变量。如何？

Question

在我的顶级函数中，我正在使用 require.js 导入一些依赖项。他们在那里，没问题。在这个函数中，我定义了一个回调函数，并尝试使用通过 require.js 导入的一些变量，即父闭包中的变量。

它们只是不存在，断点和浏览 Chrome 检查器的范围变量面板可以确认这一点。

我知道 fn.apply 和 friend 只设置了 this 的上下文，而不是他们可以破坏对闭包的引用或改变作用域链.

define([
    'backbone',
    'backbone.vent',
    'app/utils/foo',
    'app/services/intent'
], function(Backbone, Vent, Foo) {
    'use strict';

    // Backbone, Vent, and Foo are defined here

    Vent.on('myevent', function(options) {
        // Backbone is defined here, but not Vent or Foo.
    });
});

这怎么可能？

我该如何解决？

Answer 1

我怀疑您设置断点的函数包含对 Backbone 的引用，但不包含对 Vent 或 Foo 的引用。

闭包在 JS 运行时有些昂贵。它要求引擎以这样一种方式包装对象，即它保留对这些变量的内部引用，以便在执行函数时可以正确解析它们。因此，出于性能原因，Chrome(我怀疑大多数其他引擎也是如此)倾向于优化编译脚本时未实际使用的任何闭包变量。这可能会在调试时导致一些令人困惑的事情，但这是可以预料的。

考虑以下示例(注意 x、y 和 z 是在外部函数的范围内定义的，而不是在全局范围内):

window.onload = function() {
  var x = 1, y = 2, z = 3;
  (function() {
    debugger;
    x++;
  })();
}

^{Alternate JSFiddle demonstration}

如果您尝试在该脚本命中 debugger 指令时在控制台上输出 x 和 y，您将看到:

如果您查看Scope Variable 面板，您会看到:

为什么？因为 Chrome 已经确定 y 和 z 没有在函数中使用，所以编译后的代码不需要保留对变量的引用。如果您在脚本中添加对 y 的引用，那么编译器将保留对它的引用，并且该名称在调试器中将不再是 undefined。