Scope and Closures

An explanation of scope and closure intricacies.

Transcript

1. Scope and Closures in JavaScript
2. Scope and Closures Please ask me questions during the slides...
3. Scope Where you can and cannot access your variables.
4. The easy stuff... Global Scope
5. window.myVar = "My String"; (function () { alert(myVar); }()); Alert: "My String"
6. var myVar = "My String"; (function () { alert(window.myVar); }()); Alert: "My String"
7. (function () { window.myVar = "My String"; }()); alert(myVar); Alert: "My String"
8. this.myVar = "My String"; (function () { alert(myVar); }()); Alert: "My String"
9. var myVar = "My String"; (function () { alert(this.myVar); }()); Alert: "My String"
10. (function () { this.myVar = "My String"; }()); alert(myVar); Alert: "My String"
11. Still pretty simple... Local Scope
12. (function () { var myVar = "My String"; alert(myVar); }()); Alert: "My String"
13. (function () { var myVar = "My String"; (function () { myVar = "My String, Rewritten"; }()); alert(myVar); }()); Alert: "My String, Rewritten"
14. (function () { (function () { var myVar = "My String"; }()); alert(myVar); }());
15. (function () { (function () { var myVar = "My String"; }()); alert(myVar); }()); Alert: Undefined
16. (function () { var myVar = "My String"; var myFunction = function () { myVar = "The String, Rewritten"; }; alert(myVar); }());
17. (function () { var myVar = "My String"; var myFunction = function () { myVar = "The String, Rewritten"; }; alert(myVar); }()); Alert: "My String"
18. (function () { var myVar = "My String"; var myFunction = function () { myVar = "The String, Rewritten"; }; alert(myVar); myFunction(); }());
19. (function () { var myVar = "My String"; var myFunction = function () { myVar = "The String, Rewritten"; }; alert(myVar); myFunction(); }()); Alert: "My String"
20. (function () { var myVar = "My String"; var myFunction = function () { myVar = "The String, Rewritten"; }; myFunction(); alert(myVar); }());
21. (function () { var myVar = "My String"; var myFunction = function () { myVar = "The String, Rewritten"; }; myFunction(); alert(myVar); }()); Alert: "The String, Rewritten"
22. (function () { var myVar; for (var i = 1; i <= 20; ++i) { document.getElementById("el-" + i).addEventListener("click", function () { myVar = "String #" + i; alert(myVar); }, false); } }());
23. (function () { var myVar; for (var i = 1; i <= 20; ++i) { document.getElementById("el-" + i).addEventListener("click", function () { myVar = "String #" + i; alert(myVar); }, false); } }()); Click #20 > Alert: "String #20"
24. (function () { var myVar; for (var i = 1; i <= 20; ++i) { document.getElementById("el-" + i).addEventListener("click", function () { myVar = "String #" + i; alert(myVar); }, false); } }()); Click #10 > Alert: "String #20"
25. (function () { var myVar; for (var i = 1; i <= 20; ++i) { document.getElementById("el-" + i).addEventListener("click", function () { myVar = "String #" + i; alert(myVar); }, false); } }()); Click #1 > Alert: "String #20"
26. Well, it doesn't do what you'd expect But Scoping Hides A Dark Side
27. (function () { var myVar = "My String"; (function () { var myVar = "My String, Rewritten"; }()); }());
28. (function () { var myVar = "My String"; alert(myVar); (function () { var myVar = "My String, Rewritten"; }()); }());
29. (function () { var myVar = "My String"; alert(myVar); (function () { var myVar = "My String, Rewritten"; }()); }()); Alert: "My String"
30. (function () { var myVar = "My String"; (function () { alert(myVar); var myVar = "My String, Rewritten"; }()); }());
31. (function () { var myVar = "My String"; (function () { alert(myVar); var myVar = "My String, Rewritten"; }()); }()); Alert: Undefined
32. (function () { var myVar = "My String"; (function () { var myVar = "My String, Rewritten"; alert(myVar); }()); }());
33. (function () { var myVar = "My String"; (function () { var myVar = "My String, Rewritten"; alert(myVar); }()); }()); Alert: "My String, Rewritten"
34. (function () { var myVar = "My String"; (function () { var myVar = "My String, Rewritten"; }()); alert(myVar); }());
35. (function () { var myVar = "My String"; (function () { var myVar = "My String, Rewritten"; }()); alert(myVar); }()); Alert: "My String"
36. (function () { var myVar = "My String"; (function () { var myVar = "My String, Rewritten"; }()); (function () { alert(myVar); }()); }());
37. (function () { var myVar = "My String"; (function () { var myVar = "My String, Rewritten"; }()); (function () { alert(myVar); }()); }()); Alert: "My String"
38. (function () { var myVar = "My String"; (function () { var myVar = "My String, Rewritten"; }()); (function () { alert(myVar); }()); }());
39. Closures Closures retain a function's local variables when the function exits.
40. var Person = function () { var name = "Steve"; return { getName: function () { return name; }, setName: function (newName) { name = newName; } }; }; var personOne = new Person(); alert(personOne.name); Alert: Undefined
41. var Person = function () { var name = "Steve"; return { getName: function () { return name; }, setName: function (newName) { name = newName; } }; }; var personOne = new Person(); alert(personOne.getName()); Alert: "Steve"
42. var Person = function () { var name = "Steve"; return { getName: function () { return name; }, setName: function (newName) { name = newName; } }; }; var personOne = new Person(); personOne.setName("Rob"); var personTwo = new Person(); personTwo.setName("Hannah"); alert(personOne.getName()); Alert: "Rob"
43. var Person = function () { var name = "Steve"; return { getName: function () { return name; }, setName: function (newName) { name = newName; } }; }; var personOne = new Person(); personOne.setName("Rob"); var personTwo = new Person(); personTwo.setName("Hannah"); alert(personTwo.getName()); Alert: "Hannah"
44. Fun times Scope in Closures
45. var Person = function () { this.name = "Steve"; }; Person.prototype = { getName: function () { return name; }, setName: function (newName) { name = newName; } }; var personOne = new Person(); personOne.setName("Rob"); alert(personOne.getName()); Alert: "Rob"
46. var Person = function () { this.familyName = "Anderson"; }; Person.prototype = { setFamilyName: function (newFamilyName) { name = newFamilyName; }, mother: { firstName: "Susan", getFamilyName: function () { // ??? } } }; var personOne = new Person(); personOne.setFamilyName("Taylor");
47. var Person = function () { this.familyName = "Anderson"; }; Person.prototype = { setFamilyName: function (newFamilyName) { name = newFamilyName; }, mother: { firstName: "Susan", getFamilyName: function () { // ??? } } }; var personOne = new Person(); personOne.setFamilyName("Taylor");
48. Setting your own scope Call and Apply
49. var personOne = { name: "Steve" }; var personTwo = { name: "Hannah" }; var sayHello = function (aPerson) { alert("Hello " + aPerson.name + ", my name is " + this.name); }; sayHello.call(personOne, personTwo); Alert: "Hello Hannah, my name is Steve"
50. var personOne = { name: "Steve" }; var personTwo = { name: "Hannah" }; var sayHello = function (aPerson) { alert("Hello " + aPerson.name + ", my name is " + this.name); }; sayHello.call(personTwo, personOne); Alert: "Hello Steve, my name is Hannah"
51. var personOne = { name: "Steve" }; var personTwo = { name: "Hannah" }; var sayHello = function (aPerson) { alert("Hello " + aPerson.name + ", my name is " + this.name); }; sayHello.apply(personOne, [ personTwo ]); Alert: "Hello Hannah, my name is Steve"
52. var personOne = { name: "Steve" }; var personTwo = { name: "Hannah" }; var sayHello = function (aPerson) { alert("Hello " + aPerson.name + ", my name is " + this.name); }; sayHello.apply(personTwo, [ personOne ]); Alert: "Hello Steve, my name is Hannah"
53. A real world example Call and Apply
54. var Person = function () { this.name = "Steve"; }; Person.prototype = { sayDelayedHello: function (delay) { setTimeout(this.sayHello, delay); }, sayHello: function () { alert("Hello, my name is " + this.name); } }; var person = new Person(); person.sayDelayedHello(1000);
55. var Person = function () { this.name = "Steve"; }; Person.prototype = { sayDelayedHello: function (delay) { setTimeout(this.sayHello, delay); }, sayHello: function () { alert("Hello, my name is " + this.name); } }; var person = new Person(); person.sayDelayedHello(1000); Alert: "Hello, my name is "
56. var bind = function(callback, scope) { return function() { var args = Array.prototype.concat.call(arguments); callback.apply(scope, args); }; } var Person = function() { this.name = "Steve"; }; Person.prototype = { sayDelayedHello: function(delay) { setTimeout(bind(this.sayHello, this), delay); }, sayHello: function() { alert("Hello, my name is " + this.name); } }; var person = new Person(); person.sayDelayedHello(1000);
57. var bind = function(callback, scope) { return function() { var args = Array.prototype.concat.call(arguments); callback.apply(scope, args); }; } var Person = function() { this.name = "Steve"; }; Person.prototype = { sayDelayedHello: function(delay) { setTimeout(bind(this.sayHello, this), delay); }, sayHello: function() { alert("Hello, my name is " + this.name); } }; var person = new Person(); person.sayDelayedHello(1000); Alert: "Hello, my name is Steve"
58. Scope and Closures Thanks for listening
59. References •  http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/ •  http://trephine.org/t/index.php?title=JavaScript_call_and_apply •  Steve Webster & Daniel Brownridge – Thanks for the advice and putting up with my questions :)