当前位置：网站首页>Scope of ES6 variable

Scope of ES6 variable

2022-06-25 13:20:00 【acgCode】

JavaScript Update to ES6, Added a new let and const Two commands to declare variables . I combine var The scopes of these three commands are compared .

Command name	Scope
var	overall situation
let	Block level
const	Block level

In order to see the difference more directly , You can see the following code ：

for (var var_i = 0; var_i < 3; var_i++) {
    
  {
    
    console.log(var_i);
  }
}

//  Global scope 
console.log(var_i);

for (let let_i = 0; let_i < 3; let_i++) {
    
  {
    
    console.log(let_i);
  }
}

//  Block level scope 
// console.log(let_i);

{
    
  const CONST_I = "const";
  console.log(CONST_I);
}

//  Block level scope  
// console.log(CONST_I);

The output is ：

var: 0
var: 1
var: 2
var: 3
let: 0
let: 1
let: 2
const: const

You can see the source code for let and const Output out of block , I just commented it out . because let and const It's a block level scope , Output outside the block will directly report an error .

This feature can explain many problems , Like the ones that we see all the time for Loop binding events .

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>let Scope and var Scope differences </title>
</head>

<body>
  <style> .item {
       width: 100px; height: 50px; margin: 20px; border: 1px solid #3b3b3b; } </style>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</body>

</html>

use let Traverse ：

let items = document.getElementsByClassName('item');

for (let index = 0; index < items.length; index++) {
    
  items[index].onclick = function () {
    
   items[index].style.background = 'green';
   console.log(`let: ${
      index}`);
  }
}

Click event Normal execution , And the output is as follows ：
let Traverse
use var Traverse ：

let items = document.getElementsByClassName('item');

for (var index = 0; index < items.length; index++) {
    
  items[index].onclick = function () {
    
    console.log(`let: ${
      index}`);
    items[index].style.background = 'green';
  }
}

Click event unexecuted , And the output is as follows ：
var Traverse

It can be seen from the above that ,var Because it is a global scope , So after the loop is completed, it becomes 3, So when the click event is executed , Find the top level of the variable index Located globally , Has become 3, Array overflow , Click event cannot be executed normally ; and let Because it is a block level scope , When the click event is executed , Find the highest level of the variable in the loop body , It is still corresponding index, Click the event to execute normally .

Flexible application of variable scope , Different development effects can be achieved . Under the rigorous development mode , It is recommended to use more let and const Such block level scopes , This makes the code more secure .

原网站

版权声明
本文为[acgCode]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202200525483694.html

当前位置：网站首页>Scope of ES6 variable

Scope of ES6 variable

边栏推荐

猜你喜欢

随机推荐