JS variable points you don't know

stay JavaScript Explicitly declare... In Variables and implicitly declared variables have some points that we need to pay attention to
notes ： Not for the moment ES6 Medium let and const
Use var A variable declared by a keyword is an explicit variable declaration
Such as ：var abc1 = ‘hello’
js It is allowed not to use var To declare variables is to declare variables implicitly
Such as ：abc2 = ‘world’
that , The problem is coming. , Is there any difference between these two variables ？
If abc1 and abc2 All in the global scope , Print on the browser console window object ：
console.log( window )
Here's the picture ：

As you can see in the picture above ：
Variables in the global abc1 and abc2 All are window Object properties , All have global scope .
If abc1 and abc2 It's all in the function scope , Print on the browser console window object ？
function test(){
var abc1 = ‘hello’
abc2 = ‘world’
}
test()
console.log( window )
Here's the picture ：

As you can see in the picture above ：
In the scope of a function abc1 Will not appear in window In the object , Is a local variable ; and abc2 Is still window Object properties , Has global scope .
If abc1 and abc2 All in the global scope , All are window Object properties , Can they be deleted just like object attributes ？
var abc1 = ‘hello’
abc2 = ‘world’
delete window.abc1
delete window.abc2
console.log( window )
Here's the picture ：
As you can see in the picture above ：
Use var Declared variables abc1 Not deleted , Is still window Object properties ; Instead of using var Declared variables abc2 It has been deleted .
Why is there such a difference ？
This is related to the default object property descriptor ！
Object.getOwnPropertyDescriptor(obj, prop) // Returns the property descriptor of the object
var abc1 = ‘hello’ // Declare variables explicitly
var props1 = Object.getOwnPropertyDescriptor(window,‘abc1’)
console.log( props1 )
Here's the picture ：
As you can see in the picture above ：
window Object properties abc1 In the descriptor of ,configurable: false Indicates that the property is not configurable 、 Not delete .
abc2 = ‘world’ // Implicitly declare variables
var props2 = Object.getOwnPropertyDescriptor(window,‘abc2’)
console.log( props2 )
Here's the picture ：
As you can see in the picture above ：
window Object properties abc2 In the descriptor of ,configurable: true Indicates that the property is configurable 、 Deleting .
The default settings in the object property descriptor are different , It leads to the difference of whether it can be deleted ！
Besides , There are also differences between these two forms of variables in parsing execution ：
console.log( abc1 )
var abc1 = ‘hello’
Here's the picture ：
As you can see in the picture above ：
Print first abc1 And then declare variables abc1, Results comparison ‘ Weird ’ by undefined, Instead of reporting a mistake ！
stay js Variable declaration and function declaration appear in ‘ Declaration upgrade ’,js The engine parsing execution code is divided into two stages ：1. Pre parsing stage ;2. Line by line execution phase .
In the pre parsing phase, variables abc1 Is declared and assigned an initial value of undefined;
In the line by line execution phase, variables abc1 To be an assignment ‘hello’;
therefore , Printing before variable declaration does not report an error , The value printed is undefined.
console.log( abc2 )
abc2 = ‘world’
Here's the picture ：
abc2 Undefined , Similar operation , The fate is totally different ！
Don't use var Declared variables , No, ‘ Declaration upgrade ’ The mechanism of , That is, the variables in the pre parsing phase are not declared , It's only after the line by line execution phase is assigned a value that there are variables abc2, So print first abc2 You're going to report a mistake ！

* Lu Rongtao front-end learning exchange Q Group 858752519
Add group notes ：CSDN recommend