0
点赞
收藏
分享

微信扫一扫

var / let / const

Go_Viola 2022-03-27 阅读 43
javascript

概述

  • 声明变量不赋值,则为undefined,"var a; === undefined"
  • 变量的创建分为定义和赋值,var a = 10会被解析为var a; a = 10letconst也是一样的

var

重复声明

var a = 10
var a = 20
console.log(a) // 20

var允许变量重复声明

变量提升

console.log(a)

err.png

使用未定义的变量会报错


console.log(x)
var x = 10

undefined.png

程序执行到console.log(x)为什么不会报错呢,因为使用使用var存在变量提
var x = 10其实是分为两个步骤执行的,先执行var a,然后a = 10,而var a在程序正式执行之前会被优先执行(预执行),因此代码执行顺序如下

var a
console.log(a)
a = 10

全局声明

var a = 10
console.log(window.a) // == 10

在全局中使用var声明的变量会被放到window对象上,因此如果声明的变量一多,就会造成window对象沉重,且被挂在到window对象上的属性不会被回收

作用域

if (false) {
  var x = 10
}
for (var i = 0; i < 10; i++) {}
console.log(x, i) // == undefined, 10

学过java等其他语言的,在执行打印语句时都会报错,js没报错是因为在执行之前,会进行一遍预执行,在这个例子var的声明会提取至全局作用域,而打印语句也是在全局中,执行过程如下

var x
var i
if (false) {
    x = 10
}

for (i = 0; i < 10; i++) {}
console.log(x, i)

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<script>
    var els = document.querySelectorAll('li')
    for (var i = 0; i < els.length; i++) {
        els[i].onclick = function () {
            console.log(i)
        }
    }
</script>

每个li点击时都会打印6,执行过程如下

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

使用let则不会出现这个问题

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<script>
    var els = document.querySelectorAll('li')
    for (let i = 0; i < els.length; i++) {
        els[i].onclick = function () {
            console.log(i)
        }
    }
</script>

let

  • let 不存在变量提升(预执行仍然会去找var, function,但是不会查找let
  • let 在全局中声明不会挂在到window对象
  • let 不允许重复声明
let x = 20
let x = 10

图片.png


console.log(x)
let x = 10

let.png

let a = 10
console.log(window.a) // undefined

let声明的变量不会挂在到window对象上


const

const data = 10
data = 20

const.png
报错,const声明的变量是不允许二次赋值的

const data = {
    a: 10
}
data.a = 20
console.log(data.a) // 20

其他

问卷网,查查掌握程度~

举报

相关推荐

0 条评论