In the ES6 new fast-scope concept (C language, as C-language JS, of course, should be added), is very good understanding.
{let i;} Console.log (i); // i am not defined
Use the new scope in the code block.
The problem is that the FOR statement
Let arr=[]; for (Let i=0;i<5;i++) { arr[i]=function() { console.log (i); };}
Many of the explanations do not specifically describe how the scope of the work is seen, and it seems to be a natural thing.
However, for the previous C did not focus on learning, the real will be similar to the php,javascript of the children of the non-block scope to feel puzzled.
My error Understanding 1:
Let arr = [];(function() {// scope directly contains the entire for loop? Wrong for (var i = 0; i < 5; i++) { function () { CONSOLE.L OG (i);} ;} ) ();
My Error Understanding 2:
Let arr = []; for (var i = 0; i < 5; i++) { (function () {// scope contains a single loop?) Wrong function () { console.log (i); }; }) ();}
The test results show that their understanding is wrong, when looking for information, here is a pen has been taken (perhaps because the authors have used a block-scoped bar).
So think Babel since is ES6 turn ES5, understand is correct, then can find it to help.
method, using the Babel transcoding to deepen the understanding of the characteristics,
Direct online transcoding
Before transcoding:
Let arr=[]; for (Let i=0;i<5;i++) { arr[i]=function() { console.log (i); }; I+ +;} Console.log (i); // i is undefinedarr[0] ();
After transcoding:
"Use strict"; var arr = []; var function _loop (_I2) { function () { console.log (_I2); }; _i2++ ; = _i2;}; for (var _i = 0; _i < 5; _i++) { //i is undefinedarr[0] ();
Through the Babel transcoding can be clearly seen:
1, the scope is divided into two parts, the whole for the outer layer of the equivalent has a scope, here Babel use variable _i to distinguish I variable, equivalent to a scope, in understanding can understand,
Let arr= []; for(Let i = 0, len = 5; i < 5; i++) {Arr[i]=function() {console.log (i); };} Console.log (i); arr[0]();"Use Strict";vararr = [];var_loop =function_loop (_i) {arr[_i]=function() {console.log (_i); };};(function () { for(vari = 0; I < 5; i++) {_loop (i); }) (); Console.log (i); //i is undefinedArr[0]();"Use Strict";vararr = [];(function() {//equivalent to the For loop outer scope, using variable aliases in Babel to optimize var_loop =function_loop (_I2) {ARR[_I2]=function() {console.log (_I2); }; _i2++; I=_i2; }; for(vari = 0; I < 5; i++) {_loop (i); }) (); Console.log (i); //i is undefinedArr[0] ();
2, each single cycle is also a scope, the code of _loop, that is, the function scope to simulate the block scope.
3. The I variable declared in the For statement is injected into a single loop, and after a loop, the I variable is assigned back (I=_I2 in the _loop code).
The result is the same, but I feel that my understanding is very problematic, usually the more powerful the rule is usually the simpler, whether there is a more accurate explanation? I beg to tell you
What is the block scope of ES6 in the for-while statement?