当前位置：首页 > news >正文

js中var、let、const详解

news 2025/9/2 4:36:28

首先 var、let、const 在项目开发中都是用来声明变量的，在ES5中只有两种声明变量的方法：var和function，在ES6中新增了 let、const、class、import 四种声明变量的方法，本文主要讲解 var、let 与 const 的语法，其他的大家有兴趣可以了解一下。

块作用域 { }

js 中作用域有：全局作用域、函数作用域。ES6 之前没有块作用域的概念。ES6 中新增了块级作用域。块作用域是函数作用域的子集。

块作用域由 { } 包括，if 语句和 for 语句里面的 { } 也属于块作用域。

var 声明作用域

var 定义的变量，没有块的概念，可以跨块访问, 但不能跨函数访问。

function test() {if (true) {// 局部变量var message = "hi"; }console.log(message); // hi 
}
test();
console.log(message); // [ERR]: message is not defined

这里，message 变量是函数内部使用 var 定义的，函数名 test()，调用它会创建这个变量并给它赋值，调用之后变量就会被销毁，所以最后代码运行结果会显示未定义。

var声明提升

 function test() {console.log(age);var age = 16;
}
test();

这里是不会报错的，因为使用这个关键词声明的变量会自动提升到函数作用域顶部，就相当于如下代码：

 function test() {var age;console.log(age);var age = 16;
}
test();

需要注意的是只是将变量的声明提升到函数作用域的顶部，并没有将赋值提上去，所以代码的运行结果是undefined。还有就是对一个变量多次赋值是没有任何问题的。

let 声明作用域

第一个区别，let 定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。for 循环定义的迭代变量不会渗透到循环体外。

if(true) { let age = 26; console.log(age); // 26 
} 
console.log(age); // [ERR]: age is not defined

第二个区别，就是let不允许同一个块作用域中出现重复声明。var 允许出现重复声明，以最后一次声明为主。

let age;
let age; //SyntaxError: Identifier 'age' has already been declared

第三个区别，let 定义的变量没有变量提升，也就是说，使用 let 定义的变量，必须要在变量声明完以后使用，不然会报错。在let声明之前的执行瞬间被称为”暂时性死区“。

console.log(age);
let age = 26; // ReferenceError: Cannot access 'age' before initialization

第四个区别，全局声明就是 let 在全局作用域中声明的变量不会成为 window 对象的属性，var变量则会。

var age = 26;
console.log(window.age); // 26let age = 26;
console.log(window.age); // [ERR]: age is not defined

const 声明作用域

const 用来定义常量，const 基本与 let 用法相同，唯一一个重要的区别就是 const 声明变量时必须同时初始化变量。只能在块作用域里访问，而且修改 const 声明的变量会报错。

const age = 15;
age = 18; //TypeError: Assignment to constant variable.

const 声明的限制只适用于它指向的变量的引用。如果 const 变量引用的是一个对象，那么修改这个对象内部的属性并不违反 const 的限制。

const person = {};
person.age = 18;

const 实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。
对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。
但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const 只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。