|
|
| Line 1: |
Line 1: |
| − | {{glossary}}
| + | #redirect [[JavaScript#Closure]] |
| − | A closure is like a bubble in [[JavaScript]] in that it acts like a separate self-contained global scope, and can contain variables, functions, and even entire JavaScript frameworks like [[jQuery]]. The Module Pattern is a closely related concept which is the most common form that closures take, it's become the generally accepted method of creating JavaScript code designed to be imported without any assumptions as to the target environment.
| |
| − | | |
| − | Closures can have both a private and public aspect, they're in the form of a function rather than an object, and are brought into existence by calling them, what's returned is the public interface. The content of the scope within the closures definition is private and exists for as long as the returned public interface exists.
| |
| − | | |
| − | == Examples ==
| |
| − | The following example illustrates a simple closure. The variable ''foo'' is private and can only be accessed by functions in the same private scope, or by the functions returned in the public interface. An instance of the closure is created in the variable ''closure'' by being assigned the value returned by anonymously executing the declared function.
| |
| − | {{code|<js>var closure = ( function() {
| |
| − | var foo = 1;
| |
| − | return {
| |
| − | bar: 100,
| |
| − | baz: function() {
| |
| − | alert( foo );
| |
| − | alert( this.bar );
| |
| − | }
| |
| − | }
| |
| − | }() );
| |
| − | | |
| − | alert( closure.bar );
| |
| − | closure.baz();</js>}}
| |
| − | | |
| − | | |
| − | In the example above, the public function ''baz'' can access the private ''foo'' variable from it's local scope. The public interface also includes a variable ''bar'' which can be accessed publicly or via ''this'' from within the executing public interface functions. All of the items in both the private and the public scopes of the closure exist for the lifetime of the ''closure'' object.
| |
| − | | |
| − | In this next example, a single private variable is defined, and there are two public functions which are called one after the other. The first stores a secret message in the private variable which the second displays. This shows that the private local scope of the functions remains intact after the function exits and is available to all the functions. It is not available outside the scope of the functions thought, any data which needs to be available outside the private scope of the closure needs to be prefixed with ''this''. Note that if the private variable were not defined in the private scope, then the function that writes to it would create the variable in the global public scope because it's not using the ''var'' keyword.
| |
| − | {{code|<js>var closure = ( function() {
| |
| − | var private;
| |
| − | return {
| |
| − | foo: function() {
| |
| − | private = 'secret message';
| |
| − | }
| |
| − | bar: function() {
| |
| − | alert( private );
| |
| − | }
| |
| − | }
| |
| − | }() );
| |
| − | | |
| − | closure.foo();
| |
| − | closure.baz();</js>}}
| |
| − | | |
| − | | |
| − | To pass globals into your closure such as jQuery as $, use the following syntax - this is actually more efficient too because the interpreter doesn't need to walk the tree to find the value of $.
| |
| − | {{code|<js>var closure = ( function($) {
| |
| − | | |
| − | ...
| |
| − | | |
| − | }(jQuery) );</js>}}
| |
| − | | |
| − | == See also ==
| |
| − | *[[jQuery]]
| |
| − | *[[Single Page Application]]
| |
| − | *[http://jibbering.com/faq/notes/closures/ Understanding closures]
| |
| − | *[http://javascriptweblog.wordpress.com/2010/04/22/the-module-pattern-in-a-nutshell/ The module pattern in a nutshell]
| |
| − | *[http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth The Module pattern in-depth]
| |
| − | *[http://snook.ca/archives/javascript/no-love-for-module-pattern Snook.ca Why I don't love the JavaScript module pattern]
| |
| − | [[Category:JavaScript]]
| |
