1 function show( flag ){ 2 console.log( a ); 3 if( flag ){ 4 var a = 'ghostwu'; 5 return a; 6 } else { 7 console.log( a ); 8 return null; 10 9}}Copy the code

Let’s start with the variable promotion in ES5. Because of the variable promotion, the above program can access the value of A on line 2 and line 7, but undefined. If you’re not familiar with javascript’s pre-interpretation mechanism for variables, you might expect an error on line 2 and line 7. The variable a is declared only when flag is true, and javascript interprets the code as follows:

1 function show( flag ){ 2 var a; 3 console.log( a ); 4 if( flag ){ 5 a = 'ghostwu'; 6 return a; 7 } else { 8 console.log( a ); 9 return null; 11 10}}Copy the code

This mechanism often misleads programmers in projects, and even experienced front-end programmers can easily fall into the trap if they are not careful, so ES6 introduces block-level scopes to enforce control over the variable life cycle.

What is block-level scope?

1, inside the function

2, in a block (usually between a pair of curly braces)

Es6 uses the new keyword let to define variables, which are block-level scoped, as in the above example, if changed to let declaration

1 function show( flag ){ 2 console.log( a ); 3 if( flag ){ 4 let a = 'ghostwu'; 5 return a; 6 }else { 7 console.log( a ); 8 return nul; 10 9}}Copy the code

(a is not defined in line 2 and line 7) (a is not defined in line 7)

A is defined only if flag is true, and access is between the braces on lines 3 and 6. Beyond that, no access to A is reached. This is block-level scope

What are the features of let?

A LET cannot repeatedly define two identifiers with the same name in the same scope

You can use identifiers of the same name in different scopes

1 var a = 'ghostwu';
2 let a = 'ghostwu2';Copy the code
1 let a = 'ghostwu';
2 let a = 'ghostwu2';Copy the code

Identifier ‘a’ has already been declared

1 let a = 10; 2 if( a ){ 3 let a = 100; 4 console.log( a ); //100 5 } 6 console.log( a ); / / 10Copy the code

This method does not give an error because it is in two different scopes

The classic application of LET

In four buttons, gets the index of the currently clicked button

1 <script> 2 window.onload = function(){ 3 var aInput = document.querySelectorAll("input"); 4 for( var i = 0; i < aInput.length; i++ ){ 5 aInput[i].onclick = function(){ 6 alert( i ); 7} 8} 9} 10 </script> 11 12 <input type="button" value=" button 1"> 13 <input type="button" value=" button 2"> 14 <input <input type="button" value=" button" >Copy the code

If, we do it the way we did it, I is 4 for each button click, because after all four buttons are bound to the event, I becomes 4, and the next time the button is clicked, everything is 4, because I = 4 is shared

Normally, we would add a custom index binding to each button with the value I, and use this keyword to do so:

1 window.onload = function(){ 2 var aInput = document.querySelectorAll("input"); 3 for( var i = 0; i < aInput.length; i++ ){ 4 aInput[i].index = i; 5 aInput[i].onclick = function(){ 6 alert(this.index); 7} 8} 9}Copy the code

There is another way, which is to borrow the immediate expression + closure form as follows:

1 window.onload = function(){ 2 var aInput = document.querySelectorAll("input"); 3 for( var i = 0; i < aInput.length; i++ ){ 4 aInput[i].onclick = (function( j ){ 5 return function(){ 6 alert( j ); 7 } 8 })( i ); 10 9}}Copy the code

With the let keyword, you can easily do this by taking advantage of the block-level scope nature

1 window.onload = function(){ 2 var aInput = document.querySelectorAll("input"); 3 for( let i = 0; i < aInput.length; i++ ){ 4 aInput[i].onclick = function(){ 5 alert( i ); 6}; 8 7}}Copy the code

 

In the global scope, var will bind the property to the window, which may overwrite the property, while the let keyword will only mask it, and will not overwrite the property of the same name on the Window

 1         var a = 10;
 2         console.log( a );  //10
 3         console.log( window.a ); //10
 4         console.log( 'a' in window ); //true
 5 
 6         let user = 'ghostwu';
 7         console.log( user ); //ghostwu
 8         console.log( window.user ); //undefined
 9         console.log( 'b' in window  ); //false
10 
11 
12         /*
13         var RegExp = 'ghostwu';
14         console.log( RegExp );  //ghostwu
15         console.log( window.RegExp ); //ghostwu
16         console.log( 'RegExp' in window ); //true
17         */
18 
19         let RegExp = 'ghostwu';
20         console.log( RegExp );  //ghostwu
21         console.log( window.RegExp ); //function RegExp() { [native code] }
22         console.log( 'RegExp' in window ); //true    Copy the code

The const keyword is used to define constants and has the following properties:

. Block-level scope

. When declaring, you must assign an initial value

. Cannot be reassigned

If the value is an object, properties within the object are allowed to be modified

. Cannot have the same name as other identifiers

1 const user = 'ghostwu'; 2 console.log( user ); 3 user = 'zhangsan'; // Error, cannot reassignCopy the code
1 const user; // An error was reported when the initial value was definedCopy the code
1 const user = { 2 name : 'ghostwu' 3 }; 4 console.log( user.name ); //ghostwu 5 user.name = 'zhangsan'; 6 console.log(user.name); //zhangsanCopy the code
1 const user = { 2 name : 'ghostwu' 3 }; 5 name: 'zhangsan' 6} 7 console.log(user.name); / / an errorCopy the code
1 var a = 10; 2 const a = 10; // An error is reportedCopy the code
1 let a = 10; 2 const a = 10; // An error is reportedCopy the code
1 if ( true ) { 2 const a = 10; 3 console.log( a ); //10 4 } 5 console.log( a ); // a is not definedCopy the code

 

www.cnblogs.com/ghostwu