edit-article
Home
Up
Delete
Article Name:
Article Description:
by Don Sagrott - Understanding 'closures' in javascript, what it is, where and when to use it, how to create one,
Chapter ID/Name:
Status:
Write
Writing
Written
Add Photo:
Owner ID:
Content:
use HTML
Edit Content
<h1 style="text-align: center;">closure</h1> <h2>[WHAT]</h2> <ol> <li>] A 'closure' is an inner function(a function defined inside of another function), this inner function has access to the outer (enclosing) function’s variables— this 'fundamental practice' enables you to create a 'variable scope chain' and also provides a mechanism for data encapsulation (keeping a functions variables 'private' )</li> <li>] The closure has three scope chains: </li> <ol> <li>it has access to its own [lexical] scope (variables defined between its curly brackets) AND</li> <li>it has access to the outer function’s variables, AND</li> <li>it has access to the global variables.</li> </ol> <li>*] The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, even though it can call the outer function’s parameters directly.</li> </ol> <h2>[WHY]</h2> <ol> <li><strong>] Closures have access to the outer function’s variable even after the outer function returns</strong> - One of the most important and ticklish features with closures is that the inner function still has access to the outer function’s variables even after the outer function has returned. Yep, you read that correctly. When functions in JavaScript execute, they use the same scope chain that was in effect when they were created. This means that even after the outer function has returned, the inner function still has access to the outer function’s variables. Therefore, you can call the inner function later in your program. </li> <li><strong>] use to make private methods and properties - </strong>] Closures store references to the outer function’s variables; they do not store the actual value. ?Closures get more interesting when the value of the outer function’s variable changes before the closure is called. And this powerful feature can be harnessed in creative ways, such as this private variables example first demonstrated by Douglas Crockford: </li> <li><strong>] Closures Gone Awry -</strong> ?Because closures have access to the updated values of the outer function’s variables, they can also lead to bugs when the outer function’s variable changes with a for loop. </li> </ol> <h2>[WHERE]</h2> <ol> <li><strong>] in a FUNCTIONAL PROGRAMMING MODEL - </strong></li> <ol> <li>] using closures to define functionality blocks </li> </ol> <li><strong>] in an OOP PROGRAMMING MODEL -</strong></li> <ol> <li>] using closures to define private var</li> </ol></ol> <h2>[WHEN]</h2> <ol> <li>] FUNCTIONAL PROGRAMMING </li> <ol> <li>] </li> </ol> <li>] OOP</li> <ol> <li>] </li> </ol></ol> <h2>[EXAMPLE]</h2> <ol> <li>] You create a closure by defining a function inside of another function.</li> <li><strong>1] outer function</strong></li> <li>function showName (firstName, lastName) {</li> <li> var nameIntroMsg = "Your name is ";</li> <li> <strong>// 2] this inner function has access to the outer function's variables(nameIntroMsg), including the functions parameters(firstname,lastname)</strong></li> <li> function makeFullName () { </li> <li> return nameIntro + firstName + " " + lastName;</li> <li> }</li> <li> return makeFullName ();</li> <li>}</li> <li>// 3] calling the function, </li> <li>showName ("Michael", "Jackson"); // Your name is Michael Jackson</li> </ol> <h2>[HOW-TO]</h2> <ol> <li>] using closures to define functionality blocks </li> <li>] using closures to define private var</li> </ol> <h2>[REFERENCE]</h2> <ol> <li>] <a href="http://javascriptissexy.com/understand-javascript-closures-with-ease/">http://javascriptissexy.com/understand-javascript-closures-with-ease/</a> </li> <li>] <a href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work" target="_blank">How do JavaScript closures work? - Stack Overflow</a> - the OP is asking for answer to be explained like he was 6, i don't think that some of the top ranked answers quite 'got that point', be sure to check out the ... </li> <ol> <li>[] the 'princess' answer -</li> </ol> <li>] private properties and methods, namespaces, objects inside of other objects</li> <li>] <a href="/view/step?id=407" target="_blank">what is a closure?</a> IN javascript interview questions</li> </ol> <h1 style="text-align: center;"> </h1>