JS变量你不知道的点

在JavaScript中显式声明 变量与隐式声明变量有一些需要我们关注的点
注:暂不考虑ES6中的let和const
使用var关键字声明的变量即显式声明变量
如:var abc1 = ‘hello’
js允许不使用var声明变量即隐式声明变量
如:abc2 = ‘world’
那么,问题来了,这两种变量有什么不一样的地方吗?
如果abc1和abc2 都在全局作用域,在浏览器控制台打印window对象:
console.log( window )
如下图:
在这里插入图片描述
上图可以看到:
在全局的变量abc1和abc2都是window对象的属性,都拥有全局作用域。
如果abc1和abc2都在函数作用域,在浏览器控制台打印window对象?
function test(){
var abc1 = ‘hello’
abc2 = ‘world’
}
test()
console.log( window )
如下图:
在这里插入图片描述
上图可以看到:
在函数作用域中abc1不会出现在window对象中,是一个局部变量;而abc2依然是window对象的属性,拥有全局作用域。
如果abc1和abc2 都在全局作用域,都是window对象的属性,它们是否可以如对象属性一般可以被删除呢?
var abc1 = ‘hello’
abc2 = ‘world’
delete window.abc1
delete window.abc2
console.log( window )
如下图:在这里插入图片描述
上图可以看到:
使用var声明的变量abc1并没有被删除,依然是window对象的属性;而不使用var声明的变量abc2已被删除掉。
为什么会有这样的差别呢?
这与默认的对象属性描述符有关!
Object.getOwnPropertyDescriptor(obj, prop) //返回对象的属性描述符
var abc1 = ‘hello’ // 显式声明变量
var props1 = Object.getOwnPropertyDescriptor(window,‘abc1’)
console.log( props1 )
如下图:在这里插入图片描述
上图可以看到:
window对象的属性abc1的描述符中,configurable: false 表示该属性不可配置、不可删除。
abc2 = ‘world’ // 隐式声明变量
var props2 = Object.getOwnPropertyDescriptor(window,‘abc2’)
console.log( props2 )
如下图:在这里插入图片描述
上图可以看到:
window对象的属性abc2的描述符中,configurable: true 表示该属性可配置、可删除。
正是对象属性描述符中的默认设置不一样,导致了是否可删除的差异!
此外,这两种形式的变量在解析执行的时候也有差异:
console.log( abc1 )
var abc1 = ‘hello’
如下图:在这里插入图片描述
上图可以看到:
先打印abc1再声明变量abc1,结果比较‘诡异’为undefined,而不是报错!
在js中变量声明和函数声明会出现‘声明提升’,js引擎解析执行代码时分为两个阶段:1.预解析阶段;2.逐行执行阶段。
在预解析阶段变量abc1被声明并赋初始值为undefined;
在逐行执行阶段变量abc1被赋值为‘hello’;
所以,在变量声明之前打印不会报错,打印的值为undefined。
console.log( abc2 )
abc2 = ‘world’
如下图:在这里插入图片描述
abc2未定义,相似的操作,命运完全不同!
不使用var声明的变量,没有‘声明提升’的机制,即预解析阶段变量未被声明,而是在逐行执行阶段被赋值后才有变量abc2,所以先打印abc2就会报错!

*陆荣涛前端学习交流Q群858752519
加群备注:CSDN推荐

猜你喜欢

转载自blog.csdn.net/sdasadasds/article/details/125799773