This is the 8th day of my participation in the August Text Challenge.More challenges in August

var VS let

  1. There is no variable promotion in LET
  2. Let does not allow repeated declarations (in the current context, a second declaration based on let/const will be repeated regardless of how the variable was declared)
JS code execution

Lexical parsing (AST): the JS code we pull from the server over HTTP is actually strings that the browser first converts to a set of tree-structured objects that C++ can recognize and parse according to EMCAScript rules

Global context

  • Variable ascension
  • Code execution….
 console.log(x); //->undefined
 var x = 10;
 console.log(y); //->Uncaught ReferenceError: Cannot access 'y' before initialization
 let y = 10;
Copy the code

In the lexical parsing stage, if it is found that the operation of declaring variables based on let is repeated in the same context, an error will be reported directly and all codes will not be executed

 Uncaught SyntaxError: Identifier 'y' has already been declared
 var x = 10;
 var x = 20;
 console.log(x);
 let y = 10;
 let y = 20;
 console.log(y);
Copy the code

VO(G) = VO(G) = VO(G) = VO(G); If not in VO(G), try again to find in GO [because some operations in JS omit window] // 3. If no, XXX is not defined

 // debugger
var x = 10; // window.x =10
console.log(x); / / - > 10
console.log(window.x); / / - > 10
 y = 10; // window. Y = 10
// debugger
 let x = 10;
 console.log(x); / / - > 10
 console.log(window.x); //->undefined
Copy the code

Block-level scope

Before ES6 (LET), there were only two types of scope: global context and private context for function execution
But with let, a third kind of block-level scope emerges.
Let /const/function (excluding curly braces in functions and objects), the current {} becomes a block-level private context.]
// EC(G)
// GO -> x:10
// VO(G) ->y=20
Var x;
var x = 10;
let y = 20;
if(1= = =1) {// EC(BLOCK)
    // VO(BLOCK)
    // Scope chain 
      (block),ec(g)>
    // No THIS: THIS uses its parent context THIS [similar to: arrow function]
    / / not the arguments
    // No parameters
    // Variable promotion :--[var is unaffected by block level context]
    // console.log(x,y) //Uncaught ReferenceError: Cannot access 'y' before initialization
    var x = 100;// In the var world, the block-level context is meaningless
    let y = 200; // Yes belongs to EC(BLOCK)
    console.log(x,y) / / - > 100200
}
console.log(x,y) / / - > 100
Copy the code

Normal loops in ES6, for better performance [so as not to generate multiple block-level contexts]
let arr = [1.2.3]
let i = 0;
    len = arr.length;
for(; i<len; i++){/ /...
}
Copy the code

Let’s attach an example to see how we can loop for better performance

// Normal loops in ES6, for better performance [so as not to generate multiple block-level contexts]

 let arr = [1.2.3]
 let i = 0;
     len = arr.length;
 for(; i<len; i++){/ /...
 }


// loop the binding event
// The output is 5
 var buttons = document.querySelectorAll('button');
 for (var i = 0; i < buttons.length; i++) {
     buttons[i].onclick = function () {
         // Event binding is asynchronous programming [the method is not executed at this time, only the subsequent manual click is executed]alert(i); }}// Loop done: loop 5 times, bind 5 methods to each of the 5 button clicks, end the loop with global I =5
// When clicked, the binding method [private context] is executed. The variable I is encountered in the context, but I is not private
Copy the code
Solution 1: Closure mechanism
 var buttons = document.querySelectorAll('button');
 for (var i = 0; i < buttons.length; i++) {
     (function (i) {
         // Each round of fantasy creates a private context
         // + private context has a private variable
         // the + I values are 0, 1, 2, 3, 4
         buttons[i].onclick = function () {
             // In the private context of each round of the loop, the small function created is held up by one of the onclick buttons outside the context, forming a closure
             alert(i);
         }
     })(i);
 }
Copy the code
 var buttons = document.querySelectorAll('button');
 for (var i = 0; i < buttons.length; i++) {
     buttons[i].onclick = (function(i){
         return function(){
             alert(i)
         }
     })(i)
 }
Copy the code
Let plan
// The let scheme is also a closure, but it is the browser's own processing mechanism and performs better than our own closures
 var buttons = document.querySelectorAll('button');
 for (let i = 0; i < buttons.length; i++) {
     buttons[i].onclick = function() {
         alert(i);
     };
 }
 
  for(var i =0; i<5; i++){// setTimeout(function(){
    // console.log(i)
     // }, 1000)
     // Use close wrap
     (function(i){
        setTimeout(function(){
            console.log(i)
         }, 1000)
     })(i)
 }
Copy the code
Solution 2: Customize the properties
 let buttons = document.querySelectorAll('button');
 i = 0;
 len = buttons.length;
 for (; i < len; i++) {
     buttons[i].index = i; // Set the custom index property to store the index of the button
     buttons[i].onclick = function(){
         // This -> Element of the current motor
             alert(this.index)
     }
 }
Copy the code
Solution 3: Event delegation
document.body.onclick = function(ev){
    let target = ev.target;
    if(target.tagName === "BUTTON") {// The BUTTON gets its index based on the custom attribute written on the structure
        alert(target.getAttribute('index'))}}Copy the code

I see a long way to go, I will search up and down, refueling together, learn the front end!