What is scope

Scope is the effective range of a variable. Data can be read and written in a space called the scope of the data

1. Global scope:

The variables defined by the outermost function have global scope, that is, they are accessible to any inner function.Copy the code

2. Local scope:

Local scopes are generally accessible only within fixed code fragments, but not outside functions, such as inside functions. Prior to ES6, only functions could divide variables into scopes, so variables inside functions could not be accessed outside functionsCopy the code

Block-level scope:

Any code block can delimit the scope of a variable. This scope rule is called block-level scopeCopy the code

The difference between the block-level scope function scope lexical scope:

3.1) Block-level scope and function scope describe what can divide the scope of a variable
3.2) Lexical scope describes the relationship between the lookup rules of variables:

1. Block-level scopes include function scopes

There is no intersection between lexical scope, block level scope and function scope. They describe the rules of scope from two perspectives. Before ES6, JavaScript used function scope + lexical scope, while ES6 JS used block level scope + lexical scope

Second, pre-parsing

The execution of JavaScript code is performed by the JavaScript parser in the browser.

When a JavaScript parser executes JavaScript code, there are two processes: the pre-parsing process and the code execution process.

1. Raising the declaration of a variable to the top of the current scope only improves the declaration, not the assignment

2. Elevating the function declaration to the front of the current scope only elevates the declaration, not the call

3. First improve function, then improve var JavaScript execution process:

/ / in case 1
  var a = 25; 
  
  function abc() {
  
        alert(a); // undefined var a = 10; 
  }
  
  abc();


 / / case 2
 
  console.log(a); / / 25

  function a() {

        console.log('aaaaa') // No one calls a()
  }
  
  var a = 1; 
  
  console.log(a); / / 1
Copy the code

3. Variable promotion

Variable promotion: When defining a variable, the declaration of the variable is promoted to the top of the scope; the assignment of the variable is not promoted

Function promotion: The JavaScript parser first brings the function declaration of the current scope to the front of the entire scope

/ / 1, -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
var num = 10;

fun(); 

function fun() {
    console.log(num);
    var num = 20; 
} 
/ / 2, -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
var a = 18;
f1(); The call executes 22 lines because the latter overrides the former f1 function
function f1() { 
    var b = 9;
    console.log(a); 
    console.log(b); 
    var a = '123'; 
} 
/ / 3, -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
f1(); // Call the following f1 execution again
console.log(c); / / 9
console.log(b); / / 9
console.log(a); / / 18
function f1() { 
var a = b = c = 9; Var a = 9; b = 9; C = 9, so the last two hidden variables are converted to global variables
console.log(a); / / 9
console.log(b); / / 9
console.log(c); // 9 } 
Copy the code

Variable declaration enhancement: Variables defined using the var keyword are called variable declarations

The feature of function declaration promotion is that the function can be called before the function declaration