JavaScript中var与不加var声明变量的核心区别解析
本文深入解析JavaScript中var声明与不加var直接赋值的区别。重点阐述两者在window对象属性配置性(configurable)上的差异,以及由此导致的delete行为不同。同时通过代码示例说明变量提升(hoisting)机制对局部变量声明的影响,帮助开发者避免隐式全局变量带来的潜在风险。
JavaScript变量声明基础
JavaScript作为遵循ECMAScript标准的语言实现,其变量声明机制自然需符合该规范的要求。
首先明确var关键字的基本定义与使用场景。
var语句的核心功能在于声明变量。
在JavaScript中,创建变量即被称为“声明”一个变量。
具体代码示例如下:
var carName;
完成变量声明后,若未赋值,该变量的值默认为undefined。
接下来演示如何为变量赋值,操作步骤如下:
具体代码示例如下:
carName = "Volvo";
在声明变量的同时,也可以直接为其赋予初始值。
具体代码示例如下:
var carName = "Volvo";
关于语法结构,
具体代码示例如下:
var varname = value;
其中涉及的参数与值说明如下:
| 参数 | 描述 |
|---|---|
| varname | 必须。指定变量名。
变量名可以包含字母,数字,下划线和美元符号。
|
| value | 可选。指定变量的值。 注意: 如果变量声明未指定值,其默认值为 undefined |
var与不加var的核心区别
许多资料建议避免隐式声明全局变量,即声明变量时务必使用var。那么,使用var与不使用var究竟存在哪些本质区别?
首先观察一段代码示例。
var a = 'aa';
alert(a); //弹出 'aa'
alert(window.a)//弹出'aa'
可以看出,声明一个全局变量实际上等同于向window对象添加了一个属性,以下代码具有相同的效果。
a = 'aa';
alert(a); //弹出 'aa'
alert(window.a)//弹出'aa'
既然"var a = 'aa'"与"a = 'aa'"都生成了全局变量,二者有何具体差异?参考以下两段代码进行对比。
var a = 'aa';
delete window.a; // false
a = 'aa';
delete window.a; // true
两者均向window对象添加了属性,但区别在于:前者生成的属性不可删除,后者生成的属性可以删除。加上var会限制作用域,而不加var则始终向window对象动态添加属性,以下代码验证了这一结论。
var test = function(){
a = 'aa';
}
test();
alert(window.a);//弹出'aa'
由于window对象即为全局对象,因此默认情况下可以省略var,以下代码展示了相同的效果。
var test = function(){
a = 'aa';
}
test();
alert(a);//弹出'aa'
至此,细心的读者可能会产生疑问:为何隐式声明的全局变量可以被删除,而显式声明的全局变量却无法删除?
原因在于“delete操作无法删除那些configurable特性为false的属性”。某些内置对象的属性是不可配置的,例如通过变量声明或函数声明创建的全局对象属性,以下代码验证了这一机制。
delete Object.prototype; // false 不可删除,该属性是不可配置的
var a = 'aa';
delete window.a;//false 不可删除,该属性是不可配置的
function test(){};
delete window.test;//false 不可删除,该属性是不可配置的
由此可知,通过var声明的全局变量,实质是为window对象添加了一个不可配置(configurable为false)的属性;而不加var声明的全局变量,实质是为window对象添加了一个可配置(configurable为true)的属性。
需要注意的是,上述示例中凡使用window的地方,均可用this替代,例如:
var test = function(){
a = 'aa';
}
test();
alert(this.a);//弹出'aa'
关于this指向的详细原理,可参考相关文章《this,this,再次讨论javascript中的this,超全面》。
var关键字与变量提升机制
接下来,单独对JavaScript中的var关键字进行详细讲解。
我们知道定义变量时需使用var关键字,使用时需注意其具体用法。以下示例充分说明了var在使用与不使用、以及全局变量与局部变量定义时,会产生不同的执行结果。
var var01 = 1;
function funtest() {
document.write(var01);
var var01 = 0;
}
运行结果为:undefined
var var01 = 1;
function funtest() {
document.write(var01);
var01 = 0;
}
运行结果为:1
var01 = 1;
function funtest() {
document.write(var01);
var var01 = 0;
}
运行结果为:undefined
var01 = 1;
function funtest() {
document.write(var01);
var01 = 0;
}
运行结果为:1
通过以上分析,相信大家对JavaScript中的var关键字有了更深入的理解。希望本文能带来帮助,欲了解更多关于JavaScript var的相关知识,请持续关注本站。
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗?let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解:基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13
