Scope?

What is scope? It means can your variables and functions be accessed somewhere in the code (the area where the variables work). Why do you need scope? Why restrict the accessibility of variables instead of exposing them all to the public domain? This is one of the most basic concepts and concepts in computer science, isolation, for accountability, you only have access to everything you need no more, no less and it has the added benefit of modularity, of namespaces, of making code easier to read, easier to maintain, So scoping is one of the features that a lot of languages support lexical scoping is a variable that you can refer to by its name without reference error, it’s essentially static scoping,

Scope type?

Global scope is not defined in any variable, function or functions are located in the global scope under the scope of any defined within the function of the variables, or functions under the function scope, these variables cannot be referenced to the block level outside the function scope es6 before this thing, that is to say, defined in {} braces and the for (I = 0; i<10; i++){… } loop structure variables in all ran to the global scope, the let and const es6 through this problem, namely the block-level scope outer scope global scope is the outermost scope, under the outer scope of variables and functions can be accessed to obtain the inner scope to memory scope Can access to outer scope of variables, Can access its own variables, but cannot be referenced by the outer scope

Js runtime phase

The running stage of JS is divided into

Precompile phase (preparse) execution phase variable promotion and function declaration promotion is the phase of promotion. In precompile phase, the JS engine does something that reads the definition of a variable and determines the scope of its scope

Js variable definition

Global variables are scoped all over the world. Local variables are scoped only inside the function. Parameters of variables with the same name inside the function take precedence over those of global variables with the same name.

Js scope: The region in which a variable is active

In JS, the variables defined by var and function are scoped by function and the variables defined by local scope are local variables and local variables are only used inside the function and then destroyed outside the function and variables defined outside the function are global variables and global variables can be used anywhere When a global variable has the same name as a local variable, the global variable does not apply to the local variable. In the local environment, local variables are preferred and the var keyword is omitted when defining variables

Var and let-const?

Variables defined by var can be promoted (also called domain resolution domain loading…). Variables defined for undefined will be called as window properties before they are declared. The scope variable declaration is only promoted by the function. See a demo code below

var name = 'Constant east';
function say(){
    console.log(name);      // output: undefined
    var name = 'Acquisition of Tencent';
    console.log(name);      // output: 'Acquisition of Tencent'
}
say(); 
// The first time we print name, we don't print global name(' constant east east '), we print local name(undefined),
// This is due to the variable declaration enhancement in the say function during the precompilation phase,
// The execution effect after the upgrade is as follows
var name = 'Constant east';
function say(){
var name;              // The variable name declaration is promoted to the top of the scope, but is not assigned, so it is undefined
console.log(name);     // If there is a local name, ignore the global name
name = 'Acquisition of Tencent';     // Variable assignments remain in place
console.log(name);     // output: 'Acquisition of Tencent'
}
say(); 

Copy the code

Function declaration promotion

1 function declaration 2 function expression

            // function declarations (declarative functions named functions)
say();      // output "changdongdong"
function say(){
    console.log("Chang Dong Dong")}// Function expression (function assignment to a variable)
say();      // say is not function
var say = function(){
    console.log("Chang Dong Dong")}// The reason is that the function declaration (including the definition) is pushed to the top of the scope by the way it is declared,
// The expression is created by elevating the say variable to the top of the scope, where say is undefined.
// a call to say() returns an error "say is not a method".
Copy the code
var say = function(){
  console.log('1');
};
function say(){
  console.log('2');
};
say();       / / output "1"
             // After the variable declaration and function declaration are improved during the precompilation phase,
             // The above code execution effect is equivalent to
var say;             // The variable declaration is promoted
function say(){      // The function declaration is improved
  console.log('2');
}
say = function(){    // The assignment remains in place, and the say function is overridden
  console.log('1');
};
say();               / / output '1'
Copy the code

Function declaration promotion raises both the declaration and definition of the function to the top of the scope. The variable declaration is promoted, only the declared part (the unassigned state) is promoted, and the assigned part remains where it was.

Function declaration promotion takes precedence over variable declaration promotion.

console.log(say); [Function: say] is a Function body
function say(){
  console.log('1');
};
var say = '2';
console.log(say);        / / output '2"
                         // In this example, the function and the variable have the same name as say, and the function is declared first and the variable is declared later.
                         [Function: say] [Function: say] [Function: say]
                         // After the variable declaration and function declaration are improved during the precompilation phase, the above code execution effect is the same as that of the preceding code
var say = function (){   // Function declarations (including definitions) are improved
  console.log('1');
};
var say;                 // This is a declaration that does not overwrite the value of say
console.log(say);        [Function: say]
say = '2';               // Say will be overwritten
console.log(say);        / / output '2'
/ /!!!!! In the case of the same name, function declaration promotion takes precedence over variable declaration promotion.
/ /! The promoted function declaration definition will not be overridden by the promoted variable declaration of the same name
// But is overwritten by successive assignments of the same name
Copy the code

For reference only