Skip to content

Commit 4f935a2

Browse files
committed
converted the 'closures' page to the new code convention
1 parent 6464c21 commit 4f935a2

File tree

1 file changed

+46
-42
lines changed

1 file changed

+46
-42
lines changed

page/javascript-101/closures.md

+46-42
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ attribution: jQuery Fundamentals
55

66
Closures are an extension of the concept of scope -- functions have access to
77
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
99
example.
1010

1111
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
1414
function is defined, resulting in each function referencing the last value stored
1515
in the variable.
1616

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+
```
2627

2728
Closures can be used to prevent this by creating a unique scope for
2829
each iteration -- storing each unique value of the variable within it's scope.
2930

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+
};
3537

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+
```
4042

4143
Closures can also be used to resolve issues with the this keyword, which is
4244
unique to each scope:
4345

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+
};
5760

58-
innerObj.innerFunction();
61+
innerObj.innerFunction();
5962

60-
console.log(this.myName); // logs 'outer'
61-
}
62-
};
63+
console.log(this.myName); // logs 'outer'
64+
}
65+
};
6366

64-
outerObj.outerFunction();
65-
</javascript>
67+
outerObj.outerFunction();
68+
```
6669

6770
This mechanism can be particularly useful when dealing with callbacks, though
6871
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
8083
implementation only, may be sufficient as a temporary bridge until `bind` is widely
8184
adopted according to the specification.
8285

83-
<javascript>
86+
```
8487
// Shim from https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
8588
if (!Function.prototype.bind) {
8689
Function.prototype.bind = function (oThis) {
@@ -105,15 +108,16 @@ if (!Function.prototype.bind) {
105108
106109
return fBound;
107110
};
108-
}</javascript>
111+
}
112+
```
109113

110114
One of the simplest uses of `bind` is making a function, which regardless of how it's
111115
called, is called with a particular value for `this`. A common mistake made is
112116
attempting to extract a method from an object, then later calling that function and
113117
expecting it to the use the origin object as it's `this`. This however can be solved
114118
by creating a bound function using the original object as demonstrated below.
115119

116-
<javascript>
120+
```
117121
//lets manipulate "this" with a basic example
118122
var user = "johnsmith",
119123
module = {
@@ -140,4 +144,4 @@ by creating a bound function using the original object as demonstrated below.
140144
//boundGetUser() called, "module" is "this" again, "module.user" returned.
141145
boundGetUser();
142146
//janedoe
143-
</javascript>
147+
```

0 commit comments

Comments
 (0)