Does this qualify as closing Javascript?

Question

I was just starting to learn closures in JS, and someone told me that I actually wrote closures, not realizing that they are closed. I thought it was just a singleton object / class, but it considers this closure:

var myWidget = { counter : 0, init : function() { myWidget.left(); myWidget.right(); }, left : function() { // whatever }, right : function() { // whatever } } myWidget.init(); 

Is it closing? If not, what is it?

Answer 1

Yup, he does.

In this code example, you:

• Defining a simple object with some properties
• Using a closure inside one of the properties (functions) to refer to a newly defined object.

I see that if you define var myWidget in the global scope or inside another function, you will still be moving along the scope chain to get a link to myWidget .

If we use this definition of closures here :

 A closure is a combination of a code block and data of a context in which this code block is created. 

Or the definition of mozilla :

 Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure 'remembers' the environment in which it was created. 

When executing the code inside myWidget.init() you use the closure to refer to myWidget in the calls to myWidget.left() and myWidget.right() , because you transfer the variable myWidget to your context / environment (as opposed to locating it locally in the function init() ).

In other words, when myWidget.init() is executed, the following happens:

• Is myWidget local variable inside the current function() ? NO
• Move to parent area (i.e. GLOBAL)
• Is myWidget variable in the current (i.e. global) area? YES → USE OF CLOSING
• Use this myWidget link to get the variable.

I never thought about closing on a global scale, but it makes sense that the chain of chains continues to move to GLOBAL, which just acts as another block of function() {} code that wraps everything and is the final source for finding the variable we follow, here another article that supports this view:

http://lostechies.com/derickbailey/2011/11/30/is-javascripts-global-scope-really-just-a-closure/

Answer 2

This is not like closing for me. That would be the best example.

 function init() { var counter = 0; return { inc: function() { counter++; }, show: function() { return counter; } } } 

The closure around the counter variable is here. The reason is what you say

 var thing = init(); 

Javascript should contain a reference to what was usually a local variable for the init function and, therefore, destroyed after its execution. With this setting, functions that can control this local variable have been returned.

Try to call

 thing.inc(); alert(thing.show()); thing.inc(); alert(thing.show()); 

You will see 1 and then 2 in the warnings, but remember that you are manipulating the local variable in init ! This is the closure.

Edit

After reading a little, it is clear that this code has a closure. The thread that I liked most on this topic was here . As it turned out, what I have in my answer is one of the concrete examples of closure, but by no means the only one.

Answer 3

In this case, no closure is created. See this. How do JavaScript locks work?

access to variables outside your immediate lexical area creates closure

myWidget is defined in the global scope, so when initializing when calling myWidget, a closure is not created.

If you defined myWidget inside a function and in public variables in the external scope, then a closure will be created.

 var myWidget = (function() { var number = 1; return { counter : 0, init : function() { myWidget.left(); myWidget.right(); number++; }, left : function() { // whatever }, right : function() { // whatever } } })(); myWidget.init(); 

when you call init with the above code, a closure is created containing the variable number

Answer 4

 For implementing javascript closure you have to get plugin that will take care of all closure properties like css closure and javascript closure. and you have to implement closure like the following example <g:compress> <link rel="stylesheet" type="text/css" href="css/dp.css"/> <link rel="stylesheet" type="text/css" href="css/demo.css"/> </g:compress> ... <div id="datepicker"></div> <g:compress> <script type="text/javascript" src="common.js"/> <script type="text/javascript" src="closure/goog/base.js"/> <script> goog.require('goog.dom'); goog.require('goog.date'); goog.require('goog.ui.DatePicker'); </script> <script type="text/javascript"> var dp = new goog.ui.DatePicker(); dp.render(document.getElementById('datepicker')); </script> </g:compress>