Compare Revisions

Closures

Revision 464843:

Revision 464843 by pablofiumara on

Revision 464845:

Revision 464845 by pablofiumara on

Title:
Closures
Closures
Slug:
Web/JavaScript/Guide/Closures
Web/JavaScript/Guide/Closures
Tags:
"Guide","JavaScript"
"Guide","JavaScript"
Content:

Revision 464843
Revision 464845
t19    <p>t19    <div>
20      {{ EmbedLiveSample('Practical_closures', '', '', '') }}
21    </p>
22    <div style="width:auto;overflow:hidden;">
23      <pre class="brush: js">
24</pre>
25      <div style="line-height: 22px;">
26        function init() {20      function init() {
27      </div>21    </div>
28      <div style="line-height: 22px;">22    <div>
29        &nbsp; &nbsp; var name = "Mozilla"; // name is a local va23      &nbsp; &nbsp; var name = "Mozilla"; // name is a local vari
>riable created by init>able created by init
30      </div>24    </div>
31      <div style="line-height: 22px;">25    <div>
32        &nbsp; &nbsp; function displayName() { // displayName() i26      &nbsp; &nbsp; function displayName() { // displayName() is 
>s the inner function, a closure>the inner function, a closure
33      </div>27    </div>
34      <div style="line-height: 22px;">28    <div>
35        &nbsp; &nbsp; &nbsp; &nbsp; alert (name); // displayName(29      &nbsp; &nbsp; &nbsp; &nbsp; alert (name); // displayName() 
>) uses variable declared in the parent function &nbsp; &nbsp;>uses variable declared in the parent function &nbsp; &nbsp;
36      </div>30    </div>
37      <div style="line-height: 22px;">31    <div>
38        &nbsp; &nbsp; }32      &nbsp; &nbsp; }
39      </div>33    </div>
40      <div style="line-height: 22px;">34    <div>
41        &nbsp; &nbsp; displayName(); &nbsp; &nbsp;35      &nbsp; &nbsp; displayName(); &nbsp; &nbsp;
42      </div>36    </div>
43      <div style="line-height: 22px;">
44        }
45      </div>
46      <div style="line-height: 22px;">
47        init();
48      </div>
49      <div>
50        &nbsp;
51      </div>
52      <div style="line-height: 22px;">
53        &nbsp;
54      </div>
55    </div>37    <div>
38      }
39    </div>
40    <div>
41      init();
42    </div>
43    <p>
44      &nbsp;
56    <p>45    </p>
46    <p>
57      <code>init()</code>&nbsp;creates a local variable&nbsp;<cod47      <code style="font-size: 14px;">init()</code><span style="li
>e>name</code>&nbsp;and then a function called&nbsp;<code>displayN>ne-height: 1.572;">&nbsp;creates a local variable&nbsp;</span><co
>ame()</code>. <code>displayName()</code> is the inner function (a>de style="font-size: 14px;">name</code><span style="line-height: 
>&nbsp;<em>closure</em>) — it is defined inside <code>init()</code>1.572;">&nbsp;and then a function called&nbsp;</span><code style=
>>, and only available within the body of that function&nbsp;. Unl>"font-size: 14px;">displayName()</code><span style="line-height: 
>ike&nbsp;<span style="font-family: 'Courier New', 'Andale Mono', >1.572;">.</span> <code style="font-size: 14px;">displayName()</co
>monospace; line-height: normal;">init(),&nbsp;</span><code style=>de> <span style="line-height: 1.572;">is the inner function (a&nb
>"font-size: 14px;">displayName()</code> <span style="line-height:>sp;</span><em style="line-height: 1.572;">closure</em><span style
> 1.572;">has no local variables of its own, and instead reuses th>="line-height: 1.572;">) — it is defined inside</span> <code styl
>e variable&nbsp;</span><code style="font-size: 14px;">name</code>>e="font-size: 14px;">init()</code><span style="line-height: 1.572
><span style="line-height: 1.572;">&nbsp;declared in the parent fu>;">, and only available within the body of that function&nbsp;. U
>nction.</span>>nlike&nbsp;</span><span style="font-family: 'Courier New', 'Andal
 >e Mono', monospace; line-height: normal;">init(),&nbsp;</span><co
 >de style="font-size: 14px;">displayName()</code> <span style="lin
 >e-height: 1.572;">has no local variables of its own, and instead 
 >reuses the variable&nbsp;</span><code style="font-size: 14px;">na
 >me</code><span style="line-height: 1.572;">&nbsp;declared in the 
 >parent function.</span>

Back to History