2

I'm playing around with a backbone calendar app (it lets you post events on a calendar) in Chrome javascript console and notice on the right side (see image) it has a panel showing local, closure and global scope. In this particular app, I set debugger in the EventsView, and Chrome tells me that the Event (a model) and the EventView (view for one particular event) are in Closure scope.

I sort of understand global, closure and local. Global scope would be anything in the global namespace. Local is all the variables within the current scope. Can you explain in practical terms what it means for the Event and EventView to be in closure scope and how this might improve my understanding of how the app is working...What insight can this provide me? Also, you'll notice that in the Local scope, 'this' is said to be a 'child.' Why? What would the parent be?

enter image description here

BrainLikeADullPencil
  • 11,313
  • 24
  • 78
  • 134

1 Answers1

5

Read up here on closures: How do JavaScript closures work?

But the short answer, assuming you're paused on a breakpoint on line 6 below, the variable 'global' will appear in the Global variables section of debug tools, 'closure' in the Closure section, and 'local' in the Local section:

1 var global = 'foo';
2
3 function bar() {
4   var closure = 'baz';
5   function oof() {
6       var local = 'rab'; // stopped on a breakpoint on this line
7   }
8 }

When debugging, it's just helpful to know how many closures up you need to look to find the variable definition, how many other contexts it might apply to, the consequences of changing it in local scope, etc.

Community
  • 1
  • 1
glortho
  • 13,120
  • 8
  • 49
  • 45
  • 1
    assuming `global` and `local` are valid identifiers – John Dvorak Oct 21 '12 at 21:15
  • @glortho so in the context of the image i posted, the EventsView is somehow 'within' the Event model and EventView, as the same way function oof is within bar?, is that why Event model and EventView are listed as closures? – BrainLikeADullPencil Oct 21 '12 at 21:54
  • Actually, all you can infer from the console is that the scope of this call to #render is the same scope in which Event and EventView were defined or referenced, and that neither of them are referenced locally. – glortho Oct 22 '12 at 02:03
  • But...you can step up the call stack to see more. – glortho Oct 22 '12 at 13:28