本文详细对比JavaScript中var、let和const三种声明方式。重点解析未赋值表现、未使用报错机制、重复声明限制、作用域范围(全局与块级)以及const的不可变性。通过代码示例说明var的全局作用域与变量提升特性,let的块级作用域及暂时性死区,以及const必须初始化且不可重新赋值的规则,帮助开发者避免常见错误。
声明后未赋值的表现
当变量在声明后但未进行赋值操作时,var和let的行为表现一致。
//一个例子
'use strict';
(function() {
var varTest;
let letTest;
console.log(varTest); //输出undefined
console.log(letTest); //输出undefined
}());
使用未声明变量的报错机制
若尝试使用尚未声明的变量,两者的报错机制存在显著差异。
//一个例子
(function() {
console.log(varTest); //输出undefined(注意要注释掉下面一行才能运行)
console.log(letTest); //直接报错:ReferenceError: letTest is not defined
var varTest = 'test var OK.';
let letTest = 'test let OK.';
}());
重复声明变量的处理差异
在尝试对同一变量进行重复声明时,var允许覆盖,而let会抛出语法错误。
//一个例子
'use strict';
(function() {
var varTest = 'test var OK.';
let letTest = 'test let OK.';
var varTest = 'varTest changed.';
let letTest = 'letTest changed.'; //直接报错:SyntaxError: Identifier 'letTest' has already been declared
console.log(varTest); //输出varTest changed.(注意要注释掉上面letTest变量的重复声明才能运行)
console.log(letTest);
}());
变量作用域的范围对比
变量作用域的范围不同,var通常具备函数级作用域,而let具备块级作用域。
//一个例子
'use strict';
(function() {
var varTest = 'test var OK.';
let letTest = 'test let OK.';
{
var varTest = 'varTest changed.';
let letTest = 'letTest changed.';
}
console.log(varTest); //输出"varTest changed.",内部"{}"中声明的varTest变量覆盖外部的letTest声明
console.log(letTest); //输出"test let OK.",内部"{}"中声明的letTest和外部的letTest不是同一个变量
}());
const的初始化与不可变性
使用const定义的变量属于常量,一旦赋值便不可修改,且声明时必须进行初始化。
//一个例子
const b = 2;//正确
// const b;//错误,必须初始化
console.log('函数外const定义b:' + b);//有输出值
// b = 5;
// console.log('函数外修改const定义b:' + b);//无法输出
var的可修改性与默认值
var声明的变量允许后续修改,若未显式初始化,其默认值为undefined,且不会引发运行时错误。
var a = 1;
// var a;//不会报错
console.log('函数外var定义a:' + a);//可以输出a=1
function change(){
a = 4;
console.log('函数内var定义a:' + a);//可以输出a=4
}
change();
console.log('函数调用后var定义a为函数内部修改值:' + a);//可以输出a=4
let的块级作用域特性
let具有严格的块级作用域特性,在函数内部使用let定义的变量,不会泄露至函数外部,也不影响外部同名变量。
let c = 3;
console.log('函数外let定义c:' + c);//输出c=3
function change(){
let c = 6;
console.log('函数内let定义c:' + c);//输出c=6
}
change();
console.log('函数调用后let定义c不受函数内部定义影响:' + c);//输出c=3
至此,关于let、var和const的核心区别已讲解完毕。
感谢阅读本文,希望这些内容能对您的JavaScript学习有所帮助,欢迎继续支持本站获取更多技术分享。