[Web] JavaScript (No.53) Scope-Analytical Scope

Need material click pictures to contact me or private letters, comments

Scope

Scope: Scope where variables can work

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Scope</title>
</head>
<body>
<script>
    /*
    * Scope: Scope of use
    * Global variables: declared variables are var and can be used anywhere on the page
    * Disadvantage: If the page is not closed, it will not be released, occupying space and consuming memory
    * Local variables: variables defined within a function that cannot be used outside the function
    * Global scope: scope of use of global variables
    * Local scope: the scope of use of local variables
    * Block Scope: A pair of braces can be seen as a block in which variables defined can only be used
    * However, there is currently no block-level element scope in js
    * Implicit global variables: declared variables, no var
    * Difference:
    *      Global variables:
    *      Implicit global variables:
    * */
</script>
</body>
</html>

Global and local variables

global variable

Variables accessible anywhere are global variables, corresponding to global scopes
local variable

Variables accessible only within fixed code fragments, most commonly within functions. Corresponding Local Scope (Functional Scope)

Variables that do not use var declarations are global variables and are not recommended.
Variables are destroyed when they exit scope, and global variables are destroyed when they close the Web page or browser.

Block-level scopes

Any set of statements in a pair of braces (and) belongs to a block, in which all variables defined are invisible outside the code block, which we call block-level scopes.
Before es5, there was no concept of block-level scope, only function scope. At this stage, JavaScript can be considered to have no block-level scope.

Lexical Scope

The scope of variables is determined by definition rather than execution, that is to say, the lexical scope depends on the source code and can be determined by static analysis, so the lexical scope is also called static scope.

In js, lexical scoping rules:

Functions allow access to data outside of functions.
Only functions can be scoped in the entire code structure.
Scope rules are first analyzed using lifting rules
If there is a name in the current rules of action, the name outside is not considered.

var num = 123;
function foo() {
  console.log( num );
}
foo();

if ( false ) {
    var num = 123;
}
console.log( num ); // undefiend

Scope chain

Only functions can create scoping structures, so long as it is code, there is at least one scope, that is, global scope. Where there is a function in the code, that function constitutes another scope. If there are functions in the function, then a scope can be born in this scope.

Listing all such scopes can have a structure: a chain structure that points inside and outside the function. It's called scope chain.

// Case 1:
function f1() {
    function f2() {
    }
}

var num = 456;
function f3() {
    function f4() {    
    }
}

[External Link Picture Transfer Failure (img-yIUL2S5D-1565601912619)(media/06-1.png)]

// Case 2
function f1() {
    var num = 123;
    function f2() {
        console.log( num );
    }
    f2();
}
var num = 456;
f1();

[External Link Picture Transfer Failure (img-8XC4Y4S2-1565601912622)(media/06-2.png)]

Pre-analysis

The execution of JavaScript code is performed by the JavaScript parser in the browser. When JavaScript parsers execute JavaScript code, they are divided into two processes: pre-parsing and code execution.

Pre-analytical process:

Raising the declaration of a variable to the front of the current scope only raises the declaration, not the assignment.
Raising the declaration of a function to the front of the current scope will only raise the declaration, not the call.
Upgrade var first, upgrade function

JavaScript execution process

var a = 25;
function abc (){
  alert(a);//undefined
  var a = 10;
}
abc();
// If the variable and the function have the same name, the function takes precedence.
console.log(a);
function a() {
  console.log('aaaaa');
}
var a = 1;
console.log(a);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pre-analysis</title>
</head>
<body>
<script>
    /*
    * Preparsing: Parsing code ahead of time
    * What did pre-parsing do before parsing the code?
    * 1,Advance the declaration of variables -- to the current scope
    * 2,Advance the declaration of functions -- to the current scope
    *
    * Preparsing will be segmented: many pairs of script tags with function names are renamed, and pre-parsing will not conflict
    * */

    // //var num = 10;
    // //var num;
    // console.log(num);
    // var num = 10; // Initialization of variables, i.e. declaration and assignment

    // f1(); // Error Reporting
    // // The expression of function
    // var f1 = function (){
    //     console.log("haha ha");
    // }

    // f2();
    // // The declaration of the function was advanced
    // function f2(){
    //     console.log("haha ha");
    // }

    // var num = 10;
    // function f1(){
    //     // Equivalent to declaring at this location: var num;
    //     console.log(num);
    //     var num = 100;
    // }
    // f1();

   //  var num;
   //  console.log(num);//undefined
   //  num = 100;
   //  function f2(){
   //      console.log(num);//100
   //  }
   // f2();

    // // Declarations of Preferential Use Functions
    // console.log(a);//body of functions
    // function a(){
    //     console.log('aaaaa'); // no output
    // }
    // var a = 1;
    // a(); / / / The name is overwritten, where a is a variable, not a function, reporting an error directly.
    // console.log(a);//1
</script>
</body>
</html>

Global analytic rules

Internal Analytical Rules of Functions

Variable elevation

Variable elevation

When defining a variable, the declaration of the variable is raised to the top of the scope, and the assignment of the variable is not raised.
Function lifting

The JavaScript parser first advances 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();
function f1() {
  var b = 9;
  console.log(a);
  console.log(b);
  var a = '123';
}
// 3,-----------------------------------
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
  var a = b = c = 9;
  console.log(a);
  console.log(b);
  console.log(c);
}

Posted by mcloan on Mon, 12 Aug 2019 04:19:05 -0700

Programmer Group