var、function、let、const 的区别及变量提升

最新推荐文章于 2024-12-14 21:51:28 发布

原创最新推荐文章于 2024-12-14 21:51:28 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #变量提升 #预解析

本文详细介绍了JavaScript中var、let和const的区别，特别是变量提升和块级作用域的概念。var声明的变量存在变量提升，而let和const则没有此现象，并且let不允许重复声明。在for循环中，let为每个迭代创建独立的作用域，解决了闭包问题。同时，const用于声明不可变对象，但对象的属性仍可修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS的解析器会做两部分的工作：
1）预解析 | 预解析仓库 = “找东西“（找VAR , FUNCTION 以及参数）
2）逐行解读代码

预解析时，var 、function 会发生我们通常所说的变量提升

// 变量提升 var function
console.log(a)
// a() {
//   console.log('this is a2')
// }

var b=3
a()
console.log(a)
var a = 1
function a() {
  console.log('this is a1')
}
console.log(a)// 1
function a(a, b) {
  console.log('this is a2')
  console.log(a)
  console.log(b)
}
console.log(a)// 1
var a = 2
console.log(a)// 2


log:
/**
ƒ a(a, b) {
  console.log('this is a2')
  console.log(a)
  console.log(b)
}
this is a2
undefined
undefined
ƒ a(a, b) {
  console.log('this is a2')
  console.log(a)
  console.log(b)
}
1
1
2
{a: 3}
 */

/**
 * 预解析步骤：
 * 1.首先解析到第七行var a, 在预解析器中定义 a =undefined
 * 2.解析到a1, 将解析器中 a = a() {
      console.log('this is a1')
    }
    3.解析到a2， 将解析器中 a = a() {
      console.log('this is a2')
    }
    4.解析到var a= 2，由于a =undefined， 所以a = a() {
      console.log('this is a2')
    }
 */

预解析步骤：

1.首先解析到第七行var a, 在预解析器中定义 a =undefined

2.解析到a1, 将解析器中 a = a() {

console.log('this is a1')

}

3.解析到a2，将解析器中 a = a() {

console.log('this is a2')

}

4.解析到var a= 2，由于a =undefined，所以a = a() {

console.log('this is a2')

}

// 一是不存在变量提升：