目 录CONTENT

文章目录

Js中的var、let、const有什么区别?

phyger
2022-06-15 / 0 评论 / 0 点赞 / 118 阅读 / 1,769 字 / 正在检测是否收录...
广告 广告

1、前言

在前面的学习中,我们用到过var、let、const去定义变量,那么它们定义的变量之间到底有什么区别呢?今天我们就一起来看看。

2、快速开始

2.1、关于作用域

首先,var定义的变量是没有作用域的;但let和const定义的变量只能在当前块中使用。

{var a=1,b=2} // 块,块中var定义的变量可以在其他块和块外使用

function adds(a,b){
    return a+b
}

console.log(adds(a,b))
// 输出:3
{let a=1,b=2} // 块,块中let定义的变量只能在当前块中使用

function adds(arg1,arg2){
    return arg1+arg2
}

console.log(adds(a,b))
// 输出:ReferenceError: a is not defined
{const a=1,b=2} // 块,块中const定义的变量只能在当前块中使用

function adds(arg1,arg2){
    return arg1+arg2
}

console.log(adds(a,b))
// 输出:ReferenceError: a is not defined

2.2、关于是否可以重复声明的

var声明的变量是可以重复声明的,新的值会覆盖掉旧的值。但是let和const声明的变量是不能重复声明的。

var a=0,b=1
var a=1

console.log(a+b)
// 输出:2
let a=0,b=1
let a=1

console.log(a+b)
// 输出:SyntaxError: Identifier 'a' has already been declared
const a=0,b=1
const a=1

console.log(a+b)
// 输出:SyntaxError: Identifier 'a' has already been declared

2.3、是否可以变量提升

var声明的变量是可以变量提升的,但是let和const声明的变量是不能变量提升的。

变量提升就是先用变量后声明变量,变量提升的原理就是:Js在运行前会先将var和function的对象提前进行声明和定义,所以就算声明在后也不影响代码的自上而下执行。

var b=2
a=2
console.log(a+b)
var a
// 输出:4

3、var的缺点

从上面的对我们有种错觉,var比let和const更好?并不是,你会发现实际开发中,let和const的使用频率比var高,这是为什么呢?因为var存在一些缺点,我们一起来看看。

3.1、没有作用域

这个特点在某个角度来看是优点,但也是缺点。现代化的编程思想中对变量的作用域要求比较严格,一般都是遵循小范围原则。所以var声明的变量没有作用域是其较大的缺点。

3.2、自动添加为window属性

var声明的变量会自动添加为window的属性,这在开发者看来属于对window属性的侵入,是不被提倡的,所以这也是var的缺点。

> window.Cache
< ƒ Cache() { [native code] }
> var Cache='phyger';
< undefined
> window.Cache
< 'phyger'

如上,使用var定义的变量修改了window的Cache属性,将原本的Cache方法替换成了一个字符串,这是很不好的。

3.3、提前装载

因为var定义的变量会在代码运行前提前装载,这就导致块中的同名变量会覆盖掉var定义的全局变量,这也是非常糟糕的。

var name = '大马猴';
console.log(name);
function sayhi() {
    console.log('hi-1', name) // name在这个块中生效,所以此时name还未定义
    let name = 'phyger'; // let定义的变量在代码执行到这里的时候才会装载,而且let定义的name会覆盖var定义的name
    console.log('hi-2', name)
};
sayhi()

console.log(name);

输出:

大马猴
console.log('hi-1', name)
                    ^
ReferenceError: Cannot access 'name' before initialization

3.4、重复定义

var可以重复定义变量,这就导致了数据的冗余和代码不可读性提升。

0
广告 广告

评论区