My function somehow doesn’t have access to its parent closure & is missing variables. How?
closures, javascript, requirejs, scope, scope-chain
Solution
I suspect that the function where you set the breakpoint contains a reference to `Backbone`, but not `Vent` or `Foo`.
Closures are somewhat expensive on the JS runtime. It requires the engine wrap up the object in such a way that it keeps internal references to those variables so they can be resolved correctly at the time the function is executed. So for performance reasons, Chrome (and I suspect most other engines as well) has a tendency to optimize away any closure variables that aren't actually used when the script is compiled. This can lead to some confusing things when debugging, but it's to be expected.
Consider the following example (Note `x`, `y`, and `z` are defined in the scope of the outer function, not in global scope):
window.onload = function() {
var x = 1, y = 2, z = 3;
(function() {
debugger;
x++;
})();
}
Alternate JSFiddle demonstration
If you try to output `x` and `y` on the console when this script hits the `debugger` directive, this is what you'll see:
And if you look at the Scope Variable panel you'll see:
Why? because Chrome has determined that `y` and `z` are not used within the function so there's no need for the compiled code to keep a reference to the variable. If you add a reference to `y` within the script, then the compiler will keep a reference to it, and the name will no longer be `undefined` in the debugger.
Problem
In my top-level function, I’m importing some dependencies using require.js. And they’re there, no problem. Within this function, I define a callback function and attempt to use some of the variables imported via require.js, that is, variables within the parent closure. And they just aren’t there, as confirmed by a breakpoint and a peek at the Chrome inspector’s Scope Variables panel. I understand that `fn.apply` and friends only set the context as far as `this` goes, not that they can destroy a reference to a closure or alter the scope chain. ``` 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. }); }); ``` How is this even possible? And how can I fix it?