@@ -5,7 +5,7 @@ attribution: jQuery Fundamentals
5
5
6
6
Closures are an extension of the concept of scope -- functions have access to
7
7
variables that were available in the scope where the function was created. If
8
- that’s confusing, don’t worry: closures are generally best understood by
8
+ thats confusing, don’t worry: closures are generally best understood by
9
9
example.
10
10
11
11
In the functions section, we saw how functions have access to changing
@@ -14,55 +14,58 @@ loops -- the function "sees" the change in the variable's value even after the
14
14
function is defined, resulting in each function referencing the last value stored
15
15
in the variable.
16
16
17
- <javascript caption =" Each function executed within the loop will reference the last value stored in i (5) " >
18
- // this won't behave as we want it to;
19
- // every 100 milliseconds, 5 will alert
20
- for (var i=0; i<5; i++) {
21
- setTimeout(function() {
22
- alert(i);
23
- }, i*100);
24
- }
25
- </javascript >
17
+ ``` js
18
+ // Each function executed within the loop will reference the last value stored in i (5)
19
+ // this won't behave as we want it to;
20
+ // every 100 milliseconds, 5 will alert
21
+ for (var i= 0 ; i< 5 ; i++ ) {
22
+ setTimeout (function () {
23
+ alert (i);
24
+ }, i* 100 );
25
+ }
26
+ ```
26
27
27
28
Closures can be used to prevent this by creating a unique scope for
28
29
each iteration -- storing each unique value of the variable within it's scope.
29
30
30
- <javascript caption =" Using a closure to create a new private scope " >
31
- /* fix: “close” the value of i inside createFunction, so it won't change */
32
- var createFunction = function(i) {
33
- return function() { alert(i); };
34
- };
31
+ ``` js
32
+ // Using a closure to create a new private scope
33
+ /* fix: “close” the value of i inside createFunction, so it won't change */
34
+ var createFunction = function (i ) {
35
+ return function () { alert (i); };
36
+ };
35
37
36
- for (var i=0; i<5; i++) {
37
- setTimeout( createFunction(i), i*100 );
38
- }
39
- </ javascript >
38
+ for (var i= 0 ; i< 5 ; i++ ) {
39
+ setTimeout ( createFunction (i), i* 100 );
40
+ }
41
+ ```
40
42
41
43
Closures can also be used to resolve issues with the this keyword, which is
42
44
unique to each scope:
43
45
44
- <javascript caption =" Using a closure to access inner and outer object instances simultaneously " >
45
- var outerObj = {
46
- myName : 'outer',
47
- outerFunction : function () {
48
- // provide a reference to outerObj through innerFunction's closure
49
- var self = this;
50
-
51
- var innerObj = {
52
- myName : 'inner',
53
- innerFunction : function () {
54
- console.log(self.myName, this.myName); // logs 'outer inner'
55
- }
56
- };
46
+ ``` js
47
+ // Using a closure to access inner and outer object instances simultaneously">
48
+ var outerObj = {
49
+ myName : ' outer' ,
50
+ outerFunction : function () {
51
+ // provide a reference to outerObj through innerFunction's closure
52
+ var self = this ;
53
+
54
+ var innerObj = {
55
+ myName : ' inner' ,
56
+ innerFunction : function () {
57
+ console .log (self .myName , this .myName ); // logs 'outer inner'
58
+ }
59
+ };
57
60
58
- innerObj.innerFunction();
61
+ innerObj .innerFunction ();
59
62
60
- console.log(this.myName); // logs 'outer'
61
- }
62
- };
63
+ console .log (this .myName ); // logs 'outer'
64
+ }
65
+ };
63
66
64
- outerObj.outerFunction();
65
- </ javascript >
67
+ outerObj .outerFunction ();
68
+ ```
66
69
67
70
This mechanism can be particularly useful when dealing with callbacks, though
68
71
in those cases, it is often better to use ` Function.bind ` , which will avoid any
@@ -80,7 +83,7 @@ possible to work around support by using the following shim, which whilst a part
80
83
implementation only, may be sufficient as a temporary bridge until ` bind ` is widely
81
84
adopted according to the specification.
82
85
83
- < javascript >
86
+ ```
84
87
// Shim from https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
85
88
if (!Function.prototype.bind) {
86
89
Function.prototype.bind = function (oThis) {
@@ -105,15 +108,16 @@ if (!Function.prototype.bind) {
105
108
106
109
return fBound;
107
110
};
108
- }</javascript >
111
+ }
112
+ ```
109
113
110
114
One of the simplest uses of ` bind ` is making a function, which regardless of how it's
111
115
called, is called with a particular value for ` this ` . A common mistake made is
112
116
attempting to extract a method from an object, then later calling that function and
113
117
expecting it to the use the origin object as it's ` this ` . This however can be solved
114
118
by creating a bound function using the original object as demonstrated below.
115
119
116
- < javascript >
120
+ ```
117
121
//lets manipulate "this" with a basic example
118
122
var user = "johnsmith",
119
123
module = {
@@ -140,4 +144,4 @@ by creating a bound function using the original object as demonstrated below.
140
144
//boundGetUser() called, "module" is "this" again, "module.user" returned.
141
145
boundGetUser();
142
146
//janedoe
143
- </ javascript >
147
+ ```
0 commit comments