导航：首页 > 开发技术 >

JavaScript中的变量声明怎么理解

发表于：2025-02-01 作者：千家信息网编辑

千家信息网最后更新 2025年02月01日，这篇文章的内容主要围绕JavaScript中的变量声明怎么理解进行讲述，文章内容清晰易懂，条理清晰，非常适合新手学习，值得大家去阅读。感兴趣的朋友可以跟随小编一起阅读吧。希望大家通过这篇文章有所收获！

千家信息网最后更新 2025年02月01日JavaScript中的变量声明怎么理解

这篇文章的内容主要围绕JavaScript中的变量声明怎么理解进行讲述，文章内容清晰易懂，条理清晰，非常适合新手学习，值得大家去阅读。感兴趣的朋友可以跟随小编一起阅读吧。希望大家通过这篇文章有所收获！

变量

ECMAScript中，变量可以保存任何类型的数据（既可以是字符串也可以是数组也可以是别的），也即"松散的"，变量只是一个用来区分的占位符，一共有var、const、let三个关键字用于声明变量（var在ECMAScrip所有版本可用，后两个只在ES6及以后可用）。

（一）var

var a；//仅定义var b='hi'；//定义的同时，设置值

要注意的是，值的设置可以覆盖，但我们不推荐这么做

var a="hello"a="hi"

ECMAScript的变量是"松散"的，那么可以用一条语句来对不同的数据类型初始化的声明，当然插入、换行不是必要的，只是一定要用逗号隔开不同的变量。

Var a="hello"，    b=12，    c=false；

1）关于var声明的变量的作用域

function test(){    var a="shanxi";}test();//调用函数console.log(a);//ReferenceError: a is not defined//报错：a未定义

变量在使用var定义时，若是在函数内部，则该变量在函数退出时将会被销毁，无法再调用。这里的a在函数test内部使用var完成定义，调用函数test之后，随即a便被销毁，因而出现如上报错。

当省略关键词var时，这样定义的变量将成为全局变量（不过不建议这么做，太多的全局变量会让程序变得难以维护）

function test(){    a="sichuan";}test();//调用函数console.log(a);//sichuan

2）var声明提升（hoist）

如下，结果是undefined而并没有报错，是因为，使用var关键字声明的变量，会自动提升到函数作用域的顶部。也就是，会被ECMAScript看作

function test(){   console.log(a)   var a=12;}test()//undefined

也就是，会被ECMAScript看作

function test(){   var a;    console.log(a)   a=12;}test()//undefined

这种"提升"，会把所有变量的声明都提到函数作用域的顶部。

（二）let

Let和var作用相似，只是let声明的范围是块作用域，var声明的范围是函数作用域

例如如下的if语句中的{}就是一个"块"，而不是一个函数作用域。

if(true){    var b="zhang"    console.log(b);//zhang}console.log(b);//zhang

换成let：

if(true){    let b="zhang"    console.log(b);//zhang}console.log(b);//ReferenceError: b is not defined

此时b在if外边（定义b的块作用域外）便不能被引用。

！！！注意：块作用域是函数作用域的子域（是前者不一定是后者是后者不一定是前者）。

！！！注意：适用于var的作用域限制，对let是等同的（只是一个作用域是函数作用域一个是块作用域）。

关于重复声明，var不报错而let会报错，看如下实例：

var a=24;var a=12;var a=5;console.log(a);//5let b=2;let b=4;//SyntaxError: Identifier 'b' has already been declared//运行到此处就已经报错let b=8;console.log(b);var a=24;var a=12;var a=5;console.log(a);//5let b=2;let b=4;//SyntaxError: Identifier 'b' has already been declared//运行到此处就已经报错let b=8;console.log(b);

关于嵌套使用，JavaScript会记录用于变量声明的标识符以及其所在块的作用域，所以在嵌套使用时，不会报错（因为在同一块作用域中没有重复声明）。

var a="shanxi"console.log(a);//shanxiif(true){    var a="sichaun";    console.log(a);//sichuan}let b=3;console.log(b);//3if(true){    let b=5;    console.log(b);//5}

所以，let和var区别只在于，二者决定所声明的变量的相关作用域存在。

var a;let a;//SyntaxError: Identifier 'a' has already been declaredlet c;var c;//SyntaxError: Identifier 'c' has already been declared

1）与var不同，let声明的变量不会再作用域中被提升，这一现象被称为"暂时性死区"

console.log(a);var a=2;//undefinedconsole.log(b);let b=3;//ReferenceError: Cannot access 'b' before initialization

2）全局声明

Var在全局作用域中声明出的变量自动会成为window对象的属性，但let不会

var a=3;console.log(window.a)//alet b=10;console.log(window.b);//undefined

不过let声明出的变量，依旧是全局作用域发生的（不然也不会是"undeifned"），变量也会在页面的生命周期内存续，所以必须保证页面不会重复声明同一个变量

（三）Const

基本上和let相同，只是使用const时，必须同时初始化变量，且尝试修改const声明的变量时会报错

const n="zhang";n="li";//TypeError: Assignment to constant variable.const a=12;const  a=9;//不可以重复声明//SyntaxError: Identifier 'a' has already been declared

当然，const有关声明的限制，只适用于它指向的变量本身的引用，也就是说，若为一个对象，那么修改这一对象内部属性，不会违反const有关的限制。