You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/06-advanced-functions/03-closure/article.md
+14-16Lines changed: 14 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,9 +1,9 @@
1
1
2
2
# Closure
3
3
4
-
JavaScript is a very function-oriented language. It gives us a lot of freedom. A function can be created at one moment, then copied to another variable or passed as an argument to another function and called from a totally different place later.
4
+
JavaScript is a very function-oriented language. It gives us a lot of freedom. A function can be created dynamically, copied to another variable or passed as an argument to another function and called from a totally different place later.
5
5
6
-
We know that a function can access variables outside of it; this feature is used quite often.
6
+
We know that a function can access variables outside of it, this feature is used quite often.
7
7
8
8
But what happens when an outer variable changes? Does a function get the most recent value or the one that existed when the function was created?
9
9
@@ -63,24 +63,24 @@ Let's consider two situations to begin with, and then study the internal mechani
63
63
64
64
To understand what's going on, let's first discuss what a "variable" actually is.
65
65
66
-
In JavaScript, every running function, code block, and the script as a whole have an associated object known as the *Lexical Environment*.
66
+
In JavaScript, every running function, code block `{...}`, and the script as a whole have aninternal (hidden) associated object known as the *Lexical Environment*.
67
67
68
68
The Lexical Environment object consists of two parts:
69
69
70
-
1. *Environment Record* -- an object that has all local variables as its properties (andsomeotherinformationlikethevalueof`this`).
71
-
2. A reference to the *outer lexical environment*, usually the one associated with the code lexically right outside of it (outside of the current curly brackets).
70
+
1. *Environment Record* -- an object that stores all local variables as its properties (and some other information like the value of `this`).
71
+
2. A reference to the *outer lexical environment*, the one associated with the outer code.
72
72
73
-
**So, a "variable" is just a property of the special internal object, Environment Record. "To get or change a variable" means "to get or change a property of that object".**
73
+
**So, a "variable" is just a property of the special internal object, `Environment Record`. "To get or change a variable" means "to get or change a property of that object".**
74
74
75
75
For instance, in this simple code, there is only one Lexical Environment:
This is a so-called global Lexical Environment, associated with the whole script. For browsers, all `<script>` tags share the same global environment.
79
+
This is a so-called global Lexical Environment, associated with the whole script.
80
80
81
81
On the picture above, the rectangle means Environment Record (variable store) and the arrow means the outer reference. The global Lexical Environment has no outer reference, so it points to `null`.
82
82
83
-
Here's the bigger picture of how `let` variables work:
83
+
Here's the bigger picture of what happens when a `let` changes:
@@ -89,7 +89,7 @@ Rectangles on the right-hand side demonstrate how the global Lexical Environment
89
89
1. When the script starts, the Lexical Environment is empty.
90
90
2. The `let phrase` definition appears. It has been assigned no value, so `undefined` is stored.
91
91
3. `phrase` is assigned a value.
92
-
4. `phrase` refers to a new value.
92
+
4. `phrase` changes value.
93
93
94
94
Everything looks simple for now, right?
95
95
@@ -147,7 +147,7 @@ So, during the function call we have two Lexical Environments: the inner one (fo
147
147
148
148
The inner Lexical Environment has a reference to the outer one.
149
149
150
-
**When the code wants to access a variable -- the inner Lexical Environment is searched first, then the outer one, then the more outer one and so on until the end of the chain.**
150
+
**When the code wants to access a variable -- the inner Lexical Environment is searched first, then the outer one, then the more outer one and so on until the global one.**
151
151
152
152
If a variable is not found anywhere, that's an error in strict mode. Without `use strict`, an assignment to an undefined variable creates a new global variable, for backwards compatibility.
Hopefully, the situation with outer variables is quite clear for you now. But in more complex situations a deeper understanding of internals may be required. So let's dive deeper.
312
+
Hopefully, the situation with outer variables is clear now. For most situations such understanding is enough. There are few details in the specification that we omitted for brewity. So in the next section we cover even more details, not to miss anything.
313
313
314
314
## Environments in detail
315
315
316
-
Now that you understand how closures work generally, that's already very good.
317
-
318
316
Here's what's going on in the `makeCounter` example step-by-step, follow it to make sure that you know things in the very detail.
319
317
320
318
Please note the additional `[[Environment]]` property is covered here. We didn't mention it before for simplicity.
@@ -351,7 +349,7 @@ Please note the additional `[[Environment]]` property is covered here. We didn't
351
349
352
350

353
351
354
-
Please note that on this step the inner function was created, but not yet called. The code inside `function() { return count++; }` is not running; we're going to return it soon.
352
+
Please note that on this step the inner function was created, but not yet called. The code inside `function() { return count++; }` is not running.
355
353
356
354
4. As the execution goes on, the call to `makeCounter()` finishes, and the result (the tiny nested function) is assigned to the global variable `counter`:
357
355
@@ -451,7 +449,7 @@ Again, similarly to `if`, after the loop `i` is not visible.
451
449
452
450
We also can use a "bare" code block `{…}` to isolate variables into a "local scope".
453
451
454
-
For instance, in a web browser all scripts share the same global area. So if we create a global variable in one script, it becomes available to others. But that becomes a source of conflicts if two scripts use the same variable name and overwrite each other.
452
+
For instance, in a web browser all scripts (except with `type="module"`) share the same global area. So if we create a global variable in one script, it becomes available to others. But that becomes a source of conflicts if two scripts use the same variable name and overwrite each other.
455
453
456
454
That may happen if the variable name is a widespread word, and script authors are unaware of each other.
457
455
@@ -581,7 +579,7 @@ function f() {
581
579
returnfunction() { alert(value); };
582
580
}
583
581
584
-
// 3 functions in array, every one of them links to Lexical Environment
582
+
// 3 functions in array, every one of them links to Lexical Environment (LE for short)
Copy file name to clipboardExpand all lines: 1-js/08-prototypes/01-prototype-inheritance/article.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,7 +12,7 @@ In JavaScript, objects have a special hidden property `[[Prototype]]` (as named
12
12
13
13

14
14
15
-
That `[[Prototype]]` has a "magical" meaning. When we want to read a property from `object`, and it's missing, JavaScript automatically takes it from the prototype. In programming, such thing is called "prototypal inheritance". Many cool language features and programming techniques are based on it.
15
+
The prototype is a little bit "magical". When we want to read a property from `object`, and it's missing, JavaScript automatically takes it from the prototype. In programming, such thing is called "prototypal inheritance". Many cool language features and programming techniques are based on it.
16
16
17
17
The property `[[Prototype]]` is internal and hidden, but there are many ways to set it.
0 commit comments