Understanding JavaScript scopes and hosting mechanisms

In JavaScript, it is very necessary to understand the scope of variables and the promotion of variables, especially for beginners, it is easy to inexplicably fall out of the pit.

One, JavaScript scope

In the C language, a pair of curly braces {} Represents a separate scope, which we call a block-level scope. In a block-level scope, a variable that acts only on the block can be declared, affecting only the fast inner scope without affecting the outside of the block. JavaScript does not have block-level scopes, only global scopes and function scopes.

The global scope is actually the scope of the global object and can be accessed anywhere. Function object scope is different from the local variable scope of C, its scope is the entire function scope, all variables declared within the function are always visible in the function body.

Here we have some chestnuts to deepen our understanding:

Chestnut Code 1:

var x= ' I am a pot '; // declares a global variable xconsole.log (x); // ' I'm a pot ' if　　(1) {  var x= ' I am a grey pot '; Console.log (x); // ' I'm a grey pot ' }console.log (x); // ' I'm a grey pot '

If the value of the variable x is changed inside the IF statement, the global variable x is changed, stating that {} does not have a new scope, but is in the global scope, thus JavaScript is not the same scope as C. For global scope variables, whether within the if statement or within the function can be accessed;

Chestnut Code 2:

function A () {    var arg= ' I am a pot ';} Console.log (ARG); // Browser Error: Arg is not defined

The ARG variable is declared within function A, not declared outside the function, unable to get to the ARG variable, so the browser makes an error. Describes the function object scope, which is accessible only within the body of the function, and is not accessible outside the body of the function.

Chestnut Code 3:

var arg= ' I am a pot '; function A () {    console.log (ARG); // undefined    var arg= ' I'm a grey pot ';    Console.log (ARG); // ' I'm a grey pot ' }a ();

There should be a lot of baby boots. The third line of output "I am a pot" may be considered, because the code has not yet executed to the place where the Var statement declares Arg. But that's not true. Here is a feature of the JavaScript scope: the hosting mechanism.

Ii. mechanism of hosting

The so-called hoisting, that is, the concept of variable ascension. The variable elevation is about to elevate the variable declaration to the beginning of the scope where it is located. In JavaScript, the declaration of variables and functions is promoted to the top of the execution.

Because of the function scope, local variables are always defined throughout the function body. So in chestnut 3 above, the local variable arg in the function body obscures the global variable arg with the same name. However, just declare ahead of time, assignment execution is not advanced, so the third row output undefined. Thus, the above procedure is equivalent to this:

var arg= ' I am a pot '; function A () {    var  arg;    Console.log (ARG); // undefined    Arg= ' I am a grey pot ';    Console.log (ARG); // ' I'm a grey pot ' }a ();

Now, let's take some Li Zilai. Deep Profile Hosting Features:

(1) function declaration promotion is higher than the variable declaration

Chestnut Code 1:

Console.log (typeof a); // function var A; function A () {    ...}

Chestnut Code 2:

Console.log (typeof a); // function function A () {    ...} var A;

Both the variable A and function A are defined, whether the function is defined first or after it is defined, and the last a shows the function.证明function的优先级高于var。

(2) Anonymous function does not ascend upward

Chestnut Code:

Console.log (typeof a); // undefined var a=function  () {    ...}

This form of the anonymous function is actually the declaration definition of the VAR variable, so the first line of output is undefined and should be understandable.

(3) functions in different code blocks do not affect each other

Chestnut Code:

<script>// code block 1    console.log (typeof a);   undefined    var a=function  () {        ...    } </script><script>// code block 2    function  A () {        ...    } </script>

Code Block 1 of a, the output is undefined, the code block 2 function A has not been advanced to code block 1 before, thus the different blocks of code between the function is not affected.

Understanding JavaScript scopes and hosting mechanisms