Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Closure

865 views

Published on

this is a sample introduction about closure, the sample code in this slides is written in javascript

Published in: Education, Technology
  • Be the first to comment

Closure

  1. 1. Closure in JavaScript By Nicholas Ren,ThoughtWorks
  2. 2. JavaScript The world’s most misunderstood programing language  looks like an ordinary procedural language.  has more common with functional language.  closure, functions are first class.
  3. 3. Closure What is it? How to create a closure? What’s its usage? Advantage and disadvantage
  4. 4. What’s a closure? closure is a function together with a referencing environment for the non-local variables of that function closure is a specified kind of object that combines two things: a function, and the environment in which that function was created a function remembers what happens around it
  5. 5. How to create a closure? crate a inner function and return it to outside. sample: function makeAdder(x) { return function(y) { return x + y } } var add5 = makeAdder(5); var add1000 = makeAdder(1000); alert("add5(10)): " + add5(10)); alert("add1000(10)): " + add1000(10));
  6. 6. Usages of closure handle event driven function emulate private method
  7. 7. Sample:handle event driven functionsHTML:<p id="help">Helpful notes will appear here</p><p>E-mail: <input type="text" id="email" name="email"></p><p>Name: <input type="text" id="name" name="name"></p><p>Age: <input type="text" id="age" name="age"></p>
  8. 8. Sample:handle event driven functionsjavascript:function showHelp(help) { document.getElementById(help).innerHTML = help;}function setupHelp() { var helpText = [ {id: email, help: Your e-mail address}, {id: name, help: Your full name}, {id: age, help: Your age (you must be over 16)} ]; for (var i = 0; i < helpText.length; i++) { var item = helpText[i]; document.getElementById(item.id).onfocus = function() { showHelp(item.help); } }}setupHelp();
  9. 9. Sample:handle event driven functionsjavascript:function showHelp(help) { document.getElementById(help).innerHTML = help;}function makeHelpCallback(help) { return function() { showHelp(help); };}function setupHelp() { var helpText = [ {id: email, help: Your e-mail address}, {id: name, help: Your full name}, {id: age, help: Your age (you must be over 16)} ]; for (var i = 0; i < helpText.length; i++) { var item = helpText[i]; document.getElementById(item.id).onfocus = makeHelpCallback(item.help); }}setupHelp();
  10. 10. Sample:emulate private functionPerson = function(){ name = "Adam"; return { getName:function getName(){ return name;}, setName:function setName(new_name){ name = new_name; } } }p = new Person();p.setName("Jim");alert(p.getName());
  11. 11. Advantage & Disadvantage Advantage  bring any object along with the scope chain  data encapsulation  make event handling logic more clear Disadvantage:  slow speed  more memory consumption
  12. 12. Theory and implementation Closures are typically implemented with a special data structure that contains a pointer to the function code, plus a representation of the functions lexical environment (e.g., the set of available variables and their values) at the time when the closure was created. difficult to implement for a stack based programing language because of Funarg problem
  13. 13. Related Terms function object lamda lifting first-class function high-order function
  14. 14. Appendix http://javascript.crockford.com/javascript.html http://en.wikipedia.org/wiki/Scope_(computer_science)#Lexic al_scoping http://en.wikipedia.org/wiki/Closure_(computer_science)

×