-
Notifications
You must be signed in to change notification settings - Fork 0
/
You don't know javascript.html
138 lines (124 loc) · 5.07 KB
/
You don't know javascript.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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
<title>You don't know javascript</title>
<link rel="stylesheet" type="text/css" href="./CSS/home.css">
<style></style>
</head>
<body>
<H1>You don't know javascript</H1>
<div id="container"></div>
<div id="footer">
<h3> Document Information </h3>
<ul>
<li>
Date: 2015/03/04
</li>
<li>
Reference:
<ul>
<li><a target="_blank" href="https://github.com/getify/You-Dont-Know-JS">You don't know javascript</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<script src="./LIB/jquery/jquery-2.1.3.js"></script>
<script src="./LIB/google-code-prettify/src/run_prettify.js"></script>
<script src="./LIB/home.js"></script>
<script type="text/javascript">
/* -- Outline --
- Up & Going
- Scope & Closures
- this & Object Prototypes
- Types & Grammar
- Async & Performance
- ES6 & Beyond
*/
/* -- Up & Going --
Desc ...
more info ......
*/
/* -- Scope & Closures --
*/
/* What is Scope?
where do those variables live? In other words, where are they stored? And, most importantly, how does our program find them when it needs them?
These questions speak to the need for a well-defined set of rules for storing variables in some location, and for finding those variables at a later time. We'll call that set of rules: Scope.
Where and how do these Scope rules get set?
*/
/* Compiler Theory
Traditional compiled-language process:
1. Tokenizing/Lexing: breaking up a string of characters into meaningful (to the language) chunks, called tokens.
E.g. var a = 2 will be broken up into following tokens: var, a, =, 2, ;
Note: The difference between tokenizing and lexing is subtle and academic, but it centers on whether or not these tokens are identified in a stateless or stateful way.
Put simply, if the tokenizer were to invoke stateful parsing rules to figure out whether a should be considered a distinct token or just part of another token, that would be lexing.
2. Parsing: taking a stream (array) of tokens and turning it into a tree of nested elements, which collectively represent the grammatical structure of the program.
This tree is called an "AST" (Abstract Syntax Tree).
E.g. var a = 2 might start with a top-level node called VariableDeclaration, with a child node called Identifier (whose value is a),
and another child called AssignmentExpression which itself has a child called NumericLiteral (whose value is 2).
3. Code-Generation: the process of taking an AST and turning it into executable code. This part varies greatly depending on the language, the platform it's targeting, etc.
JS engines use all kinds of tricks (like JITs, which lazy compile and even hot re-compile, etc.)
*/
/* Understanding Scope
The Cast
Engine: responsible for start-to-finish compilation and execution of our JavaScript program.
Compiler: one of Engine's friends; handles all the dirty work of parsing and code-generation (see previous section).
Scope: another friend of Engine; collects and maintains a look-up list of all the declared identifiers (variables), and enforces a strict set of rules as to how these are accessible to currently executing code.
Back & Forth
The first thing Compiler will do with this program is perform lexing to break it down into tokens, which it will then parse into a tree.then Compiler gets to code-generation.
Two distinct actions are taken for a variable assignment: First, Compiler declares a variable (if not previously declared in the current scope), and second, when executing, Engine looks up the variable in Scope and assigns to it, if found.
Compiler Speak
*/
(function(){
try{
console.log("Code snippet");
}catch(e){
console.error(e.message);
}
}());
/* this & Object Prototypes
Desc ...
more info ......
*/
(function(){
try{
console.log("Code snippet");
}catch(e){
console.error(e.message);
}
}());
/* Types & Grammar
Desc ...
more info ......
*/
(function(){
try{
console.log("Code snippet");
}catch(e){
console.error(e.message);
}
}());
/* Async & Performance
Desc ...
more info ......
*/
(function(){
try{
console.log("Code snippet");
}catch(e){
console.error(e.message);
}
}());
/* ES6 & Beyond
Desc ...
more info ......
*/
(function(){
try{
console.log("Code snippet");
}catch(e){
console.error(e.message);
}
}());
</script>