Delve into the implicit variable declaration in js

Two days before encountered a problem , a lot of friends after a deep discussion, and finally there is a logic can be explained through the relative, and then I carefully studied at the relevant point, incidentally, study a little js Implicit variable.

  • Implicit variables mentioned in the following article does not refer to variables with var, let, const keywords such definition.
  • var variables mentioned in the following articles refer to a variable defined with the var statement.

An encounter implicit variable, we go to Baidu, will see the words, the implicit variable is a global variable, the variable is an implicit function using global variables, but in a function using var variables are local, then we come specific look implicit variable in the end what is the difference with var variables, let's come and explore the difference between the implicit variable var variable by some code.

1. The difference between implicit variables and variable var

Code 1:

var variables:

console.log(a);//undefined
var a = 100;

Code 2:

Implicit variable:

console.log(a);//Uncaught ReferenceError: a is not defined
a = 100;

 See the above code we found is there is a variable var variable declaration upgrade, which is equivalent to the following code Code 1:

var a;
console.log(a);
a = 100;

This and our previous understanding of the var variable is the same, variable declarations variable declarations that enhance or upgrade, and will not change here if you want to learn more about variables elevated recommend this article we can look at. Then we continue to look at the code 2, in front of an implicit variable print a variable when being given, that here we can not guess, the implicit variable is not a variable lift does not exist, of course, did not seem to exist before people say implicit variable declaration upgrade, I might wishful thinking implicit variable is a global variable declaration exists upgrade. Then we continue to look at the function, the implicit variable declaration block of code is the same as the implicit variable is not defined above with a global declaration upgrade does not exist.

Code 3:

Var function of variables:

console.log(a);//Uncaught ReferenceError: a is not defined
function b() {
    console.log(a);//undefined
    var a = 100;
}
b(); 

Code 4:

Function implicit variables:

console.log(a);//Uncaught ReferenceError: a is not defined
function b() {
	console.log(a);//Uncaught ReferenceError: a is not defined
	a = 100;
}
b();

We look at the above code 3 and code 4, we find the code 3, being given on the first line, because the variable var defined inside the function belongs to a local variable, global access is not, and then the first line Zhushidiao run, we found that the third row of a print out is undefined, prove var variables are variables declared in a function upgrade. We look at the code 4, defines an implicit variable in function, then the first row will be given, a is undefined, then the first line Zhushidiao run, found that the third row is still being given a defined, this is not to explain the implicit variable does not have variable declaration to enhance this operation, in other words, is similar to function as an implicit variable declaration and definition together, only the execution of this line of code in order to access this reference variable, the variable is recommended an article about the life cycle of the article , you can peruse it, then let's look at var variables and implicit variables defined in a block of code:

Code 5:

Code block variable var:

console.log(a);//undefined
{
	console.log(a);//undefined
	var a = 100;
}

Code 6:

Implicit block variables:

console.log(a);//Uncaught ReferenceError: a is not defined
{
	console.log(a);//Uncaught ReferenceError: a is not defined
	a = 100;
}

Then we look at the variables var block of code is to enhance the presence of the statement, and then the implicit variable declaration does not exist upgrade, so access will be above error.

  • Conclusion: According to the above series of inquiry we can basically determine a conclusion that there is no implicit variable is a variable declared improvement.

2. The function declaration code block lifting

    After the above inquiry implicit variables we then look slightly function declaration code block lifting:

Code 7:

console.log(a);//undefined
{
	function a(){};
	console.log(a);//ƒ a(){}
}
console.log(a);//ƒ a(){}

We look at the above code, we all know that js function is the "first-class citizens", is the highest priority, and that in the code above, the function whether to lift the block outside the scope of it, if I say improved, then you called from outside the scope of most blocks you will find an error, a not one method:

a();//Uncaught TypeError: a is not a function
{
	function a(){};
}

Then this before I come to a conclusion, and did not enhance the function declaration to enhance the function of the outermost layer, we would ask that the above is a print undefined, why is not it being given a defined, according to Ruan Yifeng teacher this article describes, we can draw a conclusion:

 

  • Block scope defined function in a function block scope will lift, lift the top, then declare a variable with the same name in the outermost layer similar to var, the default value is undefined.

Where implicit variable with the same name exists in the code block 3. Function

    Then we go back and look what happens when the implicit variable and function block in the presence of the same name at the same time:

First we look at the code above, the outermost layer at this time if we print a and b above you will find that will be printed is undefined:

Code 8:

console.log(a,b);//undefined undefined
{
	console.log(a);//ƒ a() {}
	function a() {};
	a = 50;
	console.log(a);//50
}
console.log(a);//ƒ a() {}
{
	console.log(b);//ƒ b() {}
	b = 50;
	function b() {};
	console.log(b);//50
}
console.log(b);//50

我们看上面的代码,你会发现最前面打印a和b都是undefined,通过前面对隐式变量和函数声明的探究我们可以知道此时外面的a和b都是函数声明定义的,另外我们从侧面也可以看出这一点,vscode有一个功能,是可以查看变量是谁定义的,那我们来看一下:

此时我们发现vscode分析出来最上面的a和b都是a和b函数定义的,根据我们上面的探究,既然隐式变量不存在变量声明提升,那只能函数定义的,然后通过对函数的探究可以证实这一点,同时配上vscode分析出来的结果,也证实了这一点,首先可以确定,最外层的全局的a和b都是函数定义的。然后我们再继续往下看,最开始的a和b打印undefined没问题,

然后我们来看下上面图片上第16行打印的结果为什么是a方法,通过我上篇文章一行一行的调试你会发现,此时代码块中的a其实是被限制在块作用域里面的,并不是全局的变量,此时其实a = 50这行代码不是隐式变量,因为a已经被函数定义过了,那a = 50也就是对之前定义过的变量赋值了,所以此时

a = 50不是隐式变量,然后对之前定义的a赋值,在代码块中打印出来为50,然后出了块作用域打印出来的结果为方法a,通过代码一步步的调试你会发现全局的a,只有在执行a方法的代码时才会把块作用域赋的值同步到全局。

第一步:此时全局的a为undefined,此时a是代码块中函数定义的:

 

 第二步:此时我们发现出来了一个块作用域,因为代码块中的函数提前了,此时代码块中的a的值为a方法,而全局的a还是undefined,没什么问题

 

 第三步:此时我们会发现当函数a这一行代码走完之后,块作用域里面的a跟全局的a都变成了a方法,也就是说想要让块作用域中的a的值同步到全局,必须让代码执行到定义a方法的下一行才可以,要不然代码块中的a的值是不会同步到代码块外面的

 

 第四步:到这一步我们会发现块作用域中的a变成了50,而全局的a还是a方法,根据上一步得到的结论,此时只要在a = 50这行代码后面再执行一次方法a,a = 50就会被同步到全局,此时验证一下也确实是这样

 然后出块作用域你会发现打印a为a方法,此时你就不会好奇为什么打印结果是a方法了,因为块作用域中的a并没有同步到全局,而b打印50,是因为b = 50后面执行了一行b方法,将b同步到了全局。到这里我们也就了解为什么两个代码只是换了一下函数的位置打印结果过就完全不同了,然后看文章的时候如果发现有什么错误或写的不好的地方,还请指正,我会立即做出修改。

Guess you like

Origin www.cnblogs.com/yukixing/p/11617354.html