ES6变量的作用域

最新推荐文章于 2022-06-10 01:03:09 发布

acgCode

最新推荐文章于 2022-06-10 01:03:09 发布

阅读量209

点赞数

分类专栏：前端 # JavaScript 文章标签： javascript es6 前端

本文链接：https://blog.csdn.net/sayuonly/article/details/117411005

版权

前端同时被 2 个专栏收录

44 篇文章 2 订阅

订阅专栏

JavaScript

17 篇文章 0 订阅

订阅专栏

JavaScript更新到ES6，增加了新的let和const两种命令来声明变量。我结合var对这三个命令的作用域进行了比较。

命令名	作用域
var	全局
let	块级
const	块级

为了更直接的看出区别，可以看如下代码：

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

// 全局作用域
console.log(var_i);

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

// 块级作用域
// console.log(let_i);

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

// 块级作用域 
// console.log(CONST_I);

输出结果为：

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

可以看到源代码对于let和const在块外的输出，我都直接注释掉了。因为let和const是块级作用域，在块外输出会直接报错。

这样的特性可以解释很多问题，比如我们常见的for循环绑定事件的问题。

<!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作用域和var作用域的区别</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>

用let遍历：

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}`);
  }
}

点击事件正常执行，并输出如下：
let遍历
用var遍历：

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';
  }
}