forked from Uni-Sol/js-demos
-
Notifications
You must be signed in to change notification settings - Fork 0
/
this.html
77 lines (63 loc) · 2.47 KB
/
this.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Try 'this'</title>
<!--this.html
- Examples quoted from 'JavaScript Enlightenment' by Cody Lindley, O'Reilly 2012
-
- Exploring the use of 'this' within functions as determined
- by CONTEXT versus the use of properties (vars) within
- functions as determined by SCOPE
-
-->
<script type="text/javascript" src="scripts/debugger.js"></script>
</head>
<body>
<p id="plog"></p>
<p id="vstatus"></p>
<p id="license" style="color:#fff">
<img src="http://i.creativecommons.org/l/by-sa/3.0/nz/88x31.png" alt="Creative Commons Licence"><br />
<em>These demos by <a href="mailto:john@real-currents.com">John </a> are licensed under the <a href="http://creativecommons.org/licenses/by-sa/3.0/nz/deed.en_GB">Creative Commons Attribution-ShareAlike 3.0 License, 2009-2012 </a></em>
</p>
<script type="text/javascript" >
Debugger.on = true;
Debugger.out = document.getElementById('plog');
Debugger.log = function ( m, r) {
if( r !== undefined ) m = r.replace(/\$1/, m);
if(Debugger.on) Debugger.out.innerHTML += "<br /><br />\n"+ m;
};
/* from JavaScript Enlightenment */
var foo = 'foo';
var myObject = { foo: 'I am myObject.foo' };
var sayFoo = function() {
Debugger.log( "The value of this['foo']: "+ this['foo'] );
}
/* Give myObject a sayFoo property and have it point to sayFoo function */
myObject.sayFoo = sayFoo;
sayFoo(); // logs 'foo'
myObject.sayFoo(); // logs 'I am myObject.foo'
/* REV EDIT:
* Now that we've tried 'this' let's look at how properties are scoped within functions.
*/
var bar = 'bar';
var sayBar = function() {
Debugger.log( "The value of 'bar': "+ bar );
}
myObject.bar = 'I am myObject.bar';
myObject.sayBar = sayBar;
sayBar(); // logs 'bar'
myObject.sayBar(); // logs 'bar' as well even though...
Debugger.log( "The value of myObject.bar: "+ myObject.bar ); // logs 'I am myObject.bar'
/*
* ... and so, the value of the 'bar' property of the sayBar() function is determined
* by scope of the function, NOT by the way (context) in which the function is called.
* The scope of the function is determined by where the function was DEFINED, which
* means that the value of 'bar' is the value of 'window.bar' because sayBar() was
* defined in the global (window) namespace.
* END EDIT
*/
</script>
</body>
</html>