function show ( flag ) { console.log ( a ); if ( flag ) { var a = ' GHOSTWU '; return a; } else { console.log ( a ); return null; } }
We lifted the variable from es5
Function show ( flag ) { Var a; console.log ( a ); if ( flag ) { a = ' GHOSTWU '; return a; } else { console.log ( a ); return null; } }
This mechanism, often misleading programmers in the project, even the senior front-end programmer, careless and easy to enter the pit, so ES6 introduced a block-level scope to strengthen the control of the variable life cycle.
What is a block-level scope?
1, inside the function
2, in blocks (usually refers to a pair of curly braces)
ES6 uses the new keyword let to define variables for block-level scopes, the above example, if you change to a let declaration
Function Show (flag) {Console.log (a); if (flag) {Let A = ' GHOSTWU '; return A; }else {Console.log (a); return nul; } }
Because let is a block-level scope, there is no variable promotion like Var, so the 2nd and 7th lines are error (A is not defined)
Only if flag is true, a is defined, and the scope of access is between the braces on line 3rd and line 6th, beyond which a is not accessible, which is the block-level scope
What are the features of let?
Let cannot define two identifiers with the same name repeatedly under the same scope
Under different scopes, you can use identifiers with the same name
1 var a = ' GHOSTWU '; 2 let a = ' ghostwu2 ';
1 Let a = ' GHOSTWU ', 2 let a = ' ghostwu2 ';
In both of these ways, you will report a redefinition error (Identifier ' A ' has already been declared)
Let A = 10; if (a) {let A = 100; Console.log (a); Console.log (a); 10
This way, there is no error, because it is two different scopes
Let's classic app
In 4 buttons, get the index of the currently clicked button
<script> window.onload = function () { var aInput = Document.queryselectorall ("input"); for ( var i = 0; i < aInput.length; i++ ) { ainput[i]. Onclick = function () { alert ( i ); } } } </script> <input type= "button" value= "Pushbutton 1" >&nBsp; <input type= "button" value= "Pushbutton 2" > <input Type= "button" value= "buttons" 3 "> <input type=" button " value=" Buttons 4 ">
If, we use the above method, each button click after the I is 4, because 4 buttons after binding the event, I the value becomes 4, the next time you click the button, all is 4, because I = 4 is shared
Usually, we will add a custom index binding to the corresponding I value on each button, and then with the This keyword, you can get it, as follows:
window.onload = function () { var ainput = document.queryselectorall ("input"); for ( var i = 0; i < aInput.length; i++ ) { aInput[i].index = i; ainput[i].onclick = function () { Alert (This.index); } } }
Window.onload = function () { Var ainput = document.queryselectorall ("input"); for ( var i = 0; i < ainput.length; i+ + ) { ainput[i].onclick = (function ( j ) { return function () { alert ( j ); } }) ( i ); } }
window.onload = function () { var ainput = document.queryselectorall ("input"); for ( let i = 0; i < aInput.length; i++ ) { ainput[i].onclick = function () { alert ( i ) ; }; } }
var, in the global scope, binds the property to the window, potentially creating a hidden danger of overriding the property, and the Let keyword simply obscures it and does not overwrite the property with the same name on the window
var a = 10; console.log ( a ); //10 console.log ( window.a ); //10 Console.log ( ' a ' in window ); //true let user = ' GHOSTWU '; console.log ( user ); //ghostwu console.log ( window.user ); //undefined console.log ( ' B ' in window ); //false /* var RegExp = ' GHOSTWU '; Console.log ( RegExp ); //ghostwu console.log ( window. regexp ) //ghostwu console.log ( ' REGEXP ' in window ); //true */ let RegExp = ' GHOSTWU '; Console.log ( RegExp ); //ghostwu Console.log ( window. regexp ); //function regexp () { [native code] } console.log ( ' RegExp ' in window ); //true
The const keyword is used to define constants, and it has the following characteristics:
. Block-level scopes
When declaring, you must give the initial value
. cannot be re-assigned
If the value is an object, then the properties inside the object are allowed to be modified.
. cannot be duplicate with other identifiers
1 Const user = ' GHOSTWU '; 2 console.log (user); 3 user = ' Zhangsan '; Error, cannot be re-assigned value
1 const user; Error, no initial value given at the time of definition
Const user = { name : ' GHOSTWU ' }; console.log ( user.name ); //ghostwu user.name = ' Zhangsan '; properties of //objects allowed to be modified console.log ( user.name ); //zhangsan
Const USER = {name: ' Ghostwu '}; user = {//error, cannot be re-assigned to User name: ' Zhangsan '} console.log (User.Name); Error
var a = 10;2
Const A = 10; Error, redefining errors
1 Let a = 10;
2 const A = 10; Error, redefining errors
1 if (true) {
2 const A = 10;
3 Console.log (a); 10
4}
5 Console.log (a); Error: A is not defined
This article is from the "GHOSTWU" blog, make sure to keep this source http://ghostwu.blog.51cto.com/11192807/1959057
[JS Master's Road] ES6 series Tutorial-VAR, let, Const detailed