关于JavaScript中let关键字的理解

时间:2021-1-8 作者:admin

1、let的介绍

首先,初识let是在MDN上面,介绍了let的基本用法,根据它的介绍,我知道了以下几点:

  • let声明的变量作用域是块级的
  • let变量不能重复声明
  • let存在暂时性死区(变量未初始化之前,不能使用)

一开始我是这么理解的,我相信也是大多数人理解的那样。

2、经典面试题

let liList = document.querySelectorAll('li') // 6个li
for(var i=0; i<liList.length; i++){
    liList[i].onclick = function(){
        console.log(i)
    }
}

上面这段代码会输出什么呢?答案是6个6,我想这一点大家应该知道,因为var关键字会使变量提升,所以其实只有一个全局i,当你去执行click事件的时候,这时候i已经变成6了。

那么把var改成let之后呢,

let liList = document.querySelectorAll('li') //6个li
for(let i=0; i<liList.length; i++){
    liList[i].onclick = function(){
        console.log(i)
    }
}

这段代码执行效果,依次点击会输出0,1,2,3,4,5

其实这里有两个点:1、每次进入循环体,都会在循环体中重新声明一个i并初始化一次,2、for后面的括号里有一个作用域

所以其实一共存在7个i,六次循环,然后一个for后面的作用域。

相当于这样子:

let liList = document.querySelectorAll('li') //6个li
for(let i=0; i<liList.length; i++){
    let i = i(这里的i是for后面括号中的)
    liList[i].onclick = function(){
        console.log(i)
    }
}

所以当letfor一起用的时候,如果搞不清i是哪里的,那么自己声明一个重新初始化。

3、let和var、function的比较

众所周知,varfunction 都是存在提升的,也就是说下面的代码不会报错:

console.log(i) // undefined
var i = 2
fn()

function fn() {
    console.log('hello')
}

那么假如把var变成let呢?会报错,

console.log(i) // Uncaught ReferenceError: i is not defined
let i = 2

现在就来看下它们三者的区别,

首先JS变量的三个过程【创建、初始化、赋值】

3.1、var声明的过程
function fn() {
    var x = 1
}
fn()
  1. 当进入fn后,会为fn创建一个环境
  2. 找到所有用var声明的变量,然后创建它们
  3. 将它们初始化undefined
  4. 执行代码
  5. x = 1x变量赋值为1

也就是说,var声明会在代码执行前就创建变量,并初始化为undefined

3.2、let声明的过程
function fn() {
    let x = 1
    x = 2
}
fn()
  1. 当进入fn后,会为fn创建一个环境
  2. 找到所有用let声明的变量,然后创建它们
  3. 执行代码(未初始化)
  4. 执行x = 1,将x初始化为1
  5. 执行x = 2,将x赋值为2

也就是说,let声明会在代码执行前就创建变量,但不会初始化,所以初始化之前不能使用,存在暂时死区。

3.3、function声明的过程
fn()
function fn() {
    console.log('hello')
}
  1. 找到所有用function声明的变量,然后创建它们
  2. 将变量初始化赋值function { console.log('hello') }
  3. 开始执行fn

也就是说,function声明会在代码执行前就创建,初始化并赋值

3.4、总结
  1. var创建初始化都被提升了;
  2. let创建过程被提升了,但是初始化没有提升;
  3. function创建初始化赋值都被提升了;
  4. 顺便说一下const创建初始化过程和let一样,只是没有赋值过程。

4、总结

以上就是我对let的理解。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。