JavaScript声明变量,用var声明和不用var声明的区别
JavaScript声明变量可以用var声明,也可以不用var声明,两种声明变量的方式有什么区别呢?
JavaScript变量分为 局部变量 和 全局变量
简单说就是:
在函数中用var声明的变量即为 局部变量
在函数外用var声明的变量即为 全局变量
但是,这里说的函数中和函数外也不是绝对的,具体情况看以下代码及分析
'demo1'
var a = 123; // 全局变量
var b = 456; // 全局变量
console.log(a); // 123
console.log(b); // 456
console.log(window.a); // 123
console.log(window.b); // 456
console.log(window); // 结果如下图
可以看到,不管是直接访问变量 a b 或是访问window对象的属性 a b 都能输出结果
'demo2'
var a = 123;
b = 456;
console.log(a); // 123
console.log(b); // 456
console.log(window.a); // 123
console.log(window.b); // 456
console.log(window); // 结果如下图
结果和上面demo1一样
另外,使用var声明变量也叫显示声明,不用var声明变量也叫隐式声明
通过上面demo1和demo2我们可以得到以下结论:
在函数外,不管是使用var声明变量,还是不用var声明变量,它们都是全局变量
全局变量其实是在window对象中添加属性并赋值
'demo3'
function fn() {
var a = 123;
var b = 456;
console.log(a); // 123
console.log(b); // 456
console.log(window.a); // undefined
console.log(window.b); // undefined
}
fn();
直接访问变量 a b 可以正常输出结果,访问window对象的属性 a b 结果为 undefined
'demo4'
function fn() {
var a = 123;
b = 456;
console.log(a); // 123
console.log(b); // 456
console.log(window.a); // undefined
console.log(window.b); // 456
}
fn();
// 直接访问变量 a b 可以正常输出结果,访问window对象的属性 a 结果为 undefined,属性 b 却可以正常输出结果
// 等等!!!
// 好像发现了什么...
console.log(window); // 结果如下图
可以看到在window对象中有属性 b 而没有属性 a
通过上面demo3和demo4我们可以得到以下结论:
在函数中,使用var声明的变量为局部变量,不用var声明的变量为全局变量
用var声明变量和不用var声明变量的区别之一:
在函数外,用var声明的变量为全局变量,不用var声明的变量为全局变量
在函数中,用var声明的变量为局部变量,不用var声明的变量为全局变量
仅仅是作用域的区别吗?
OK,继续折腾…
'demo5'
var a = 123;
b = 456;
console.log(window.a); // 123
console.log(window.b); // 456
console.log(delete a); // false
console.log(delete b); // true
console.log(window.a); // 123
console.log(window.b); // undefined
// delete 用来删除对象的属性,如果是不可配置的属性返回false,其他情况返回true
上面demo5可以看到,变量 a b 都是全局变量,同为window对象的其中一个属性,a 不可以删除,b 可以删除
用var声明变量和不用var声明变量的区别之二:
同为全局变量,同为window对象的其中一个属性,用var声明的变量不可以删除,不用var声明的变量可以删除
那么,什么时候可以删除?什么时候不可以删除??
我们先来了解两个方法:
Object.getOwnPropertyDescriptor(); // 方法返回某个对象的属性的描述对象
Object.defineProperty(); // 方法会直接在某个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象
'demo6'
var a = 123;
b = 456;
console.log(Object.getOwnPropertyDescriptor(window, 'a'));
// {value: 123, writable: true, enumerable: true, configurable: false}
console.log(Object.getOwnPropertyDescriptor(window, 'b'));
// {value: 456, writable: true, enumerable: true, configurable: true}
在demo6中我们可以看到window对象的属性 a 和 b 的描述对象包含以下信息:
value 属性的值
writable 属性是否可读写
enumerable 属性是否可枚举
configurable 属性是否可配置
属性 a 和 b 的描述对象区别在于 是否可配置 这个特性
属性 a 为 configurable: false 不可配置
属性 b 为 configurable: true 可配置
再来看一个示例
'demo7'
var a = 123;
b = 456;
Object.defineProperty(window, 'b', {configurable: false});
console.log(delete a); // false
console.log(delete b); // false
console.log(window.a); // 123
console.log(window.b); // 456
console.log(Object.getOwnPropertyDescriptor(window, 'b'));
// {value: 456, writable: true, enumerable: true, configurable: false}
通过demo6和demo7我们得到上面那个问题的答案,即对象的属性是否可删除,取决于对象的描述对象属性configurable
结论,用var声明的变量默认带不可删除属性,不用var声明的变量默认带可删除属性。
OK,关于变量用var声明和不用var声明的区别讨论到此,如有不准确之处欢迎指正交流。
下一篇: java中的数据类型
推荐阅读
-
函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!闭包访问局部变量
-
详解js中let与var声明变量的区别
-
ES6 新增声明变量的 var let const 的区别详解
-
用var,let,const声明变量作用域异同详解
-
javascript中var let const三种变量声明方式详解
-
javascript中var let const三种变量声明方式详解
-
JavaScript声明变量,用var声明和不用var声明的区别
-
PHP 闭包获取外部变量和global关键字声明变量的区别讲解
-
javascript:变量声明&&赋值的提升和函数声明&&定义的提升在不同情况下的表现
-
JavaScript变量声明var,let.const