Learning the front end (34) ~ js Learning (XI): Scope and variable lift

Scope: Popular terms, the scope is the scope of a variable or function . Scope when the function is defined, it has been determined.

Purpose: To improve the reliability of the program, while reducing the naming conflict.

Classification scope

Global scope: the role of internal entire script tag, or the scope of a separate JS file.
Function scopes (local scope): role in the function code environment.

Scope of access relations

Within the scope can access the variable outside the scope of the outer scope can not access to the internal variable scope.

Code Example:

A = var 'AAA'; 
function foo () { 
    var = B 'BBB'; 
    the console.log (A); // print result: aaa. DESCRIPTION access innermost scope variables in the outer scope 
} 

foo (); 
the console.log (B); // error: Uncaught ReferenceError: b is not defined . Description enclosing scope can not access variables in the inner scope

Variable scope

According to the scope of the different variables can be divided into two categories: global variables, layout variables.

Global variables:

Variables declared in global scope, called "global variables." A place in any global scope, can access this variable.
In the global scope, the variable is declared using the var global variables.
Special case: var variable is not used within the function is declared global variables (not recommended for such use).

Local variables:

Defined in the variable function scope, called "local variables."
Inside the function, the variables are declared local variable var.
The function parameter is a local variable belongs.

From a performance point of view the global and local variables:

Global variables: will only be destroyed when the browser is closed, a comparison of total memory.
Local variables: When the code block in which it is run, it will be destroyed, Comparative save memory space.

Superior-subordinate relationship scopes

When operating a variable function scope, it will first look for in their scope, if there is direct use (principle of proximity). If not, the next higher level scope looking until you find the global scope; if the global scope is still not found, the error ReferenceError.

In the function you want to access the global variables can use the window object . (For example, global scope and function scope are defined variable a, if you want to access the global variables can be used window.a)

Global scope

JS code written directly in the script tag, both in the global scope.

Global scope is created when the page is opened, destroyed when the page is closed.
In the global scope has a global object window, which representatives of a browser window, created by the browser, we can directly use.

In the global scope of:

The variables are created as window object to save the property . For example, in the global scope write var a = 100, here a is equivalent to window.a.
Function will create a window object preservation methods.

Variable declaration in advance ( variable lift )

Use variable declaration var keyword (for example var a = 1), it will be declared before any code is executed (but not assigned), but if you are not using the var keyword (such as direct writing when declaring variables a = 1), the variable is not declared in advance .

Example 1:

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

Print result: undefined . Note that the print result is not an error, but undefined, a description variable is declared in advance, but has not yet been assigned.

Example 2:

    the console.log (a); 
    a = 123; // this case corresponds to a window.a

Program will Uncaught ReferenceError: a is not definedcomplain: .

Example 3:

    a = 123; // this case corresponds to a window.a 
    the console.log (a);

Print Results: 123.

Example 4:

foo();

function foo() {
    if (false) {
        var i = 123;
    }
    console.log(i);
}

Print result : undefined. Note that the print result and not an error, but undefined. This example once again shows: the variable i before the function execution, it was declared in advance, but has not yet been assigned.

Function declaration in advance

Function declaration:

Use 函数声明a function in the form of creation function foo(){}, it will be declared in advance .

In other words, the entire function before any code executes it was created . So, in order of the code, we can first call the function, and then define the function.

Code Example:

    fn1 (); // While the definition function fn1 is in the back, but because they were declared in advance, so you can call a function here
 
    function fn1 () { 
        console.log ( 'I'm function fn1'); 
    }

Function expression:

Use 函数表达式functions created var foo = function(){}, it will not be declared in advance , so you can not call before the statement .

Well understood, because at this time foo is declared (here only variable declarations), and is undefined, and did not function(){} assigned to foo.

Therefore, the following example will be given:

Function scope

Remind 1: In the function scope, but also a statement in advance of features:

Function, using var keyword to declare a variable, will be declared in a function before any code is executed .
Function, no variables are global variables var statement , but and does not declare in advance .

For example:

    a. 1 = var; 

    function foo () { 
        the console.log (a); 
        a = 2; // here corresponds to a window.a 
    } 

    foo (); 
    the console.log (a); // print result is 2

Code above, after performing foo (), the function which the print result is 1. If removing the first line of code, execution foo (), the function which the print result is Uncaught ReferenceError: a is not defined.

Reminder 2: definition of the parameter is equivalent to the scope of the function declaration of variables.

    function fun6 (e) {// this function, because the parameter E, this case is equivalent to the first line of code inside the function, wrote E var; 
        the console.log (E); 
    } 

    FUN6 () ; // print result is undefined 
    FUN6 (123); // print result 123

JavaScript is not block-level scope (before for ES6)

(Such as Java, C #, etc.), the presence of block-level scope in other programming languages by {}including it. For example, in the Java language, variables are created in the if statement, you can only use inside an if statement:

if(true){
    int num = 123;
    system.out.print(num); // 123
}
system.out.print(num); // 报错

However, no block-level scope (for ES6 before) in JS. For example as follows:

IF (to true) { 
NUM var = 123; 
    the console.log (123); // 123 
} 

the console.log (123); // 123 (normal print)

The scope chain

Introduction:

As long as the code, there are at least a scope
Written inside the function's local scope
If the function still function, then this scope will be born and a scope

Based on a few content above, we can draw the scope chain concepts.

Scope chain : variable inner functions to access an external function, using the chain to find ways to decide which value is taken, this structure is called the scope chain . When searching, using the principle of proximity .

Code Example:

10 NUM = var; 

function Fn () { 
    // external function 
    var NUM = 20 is; 

    function Fun () { 
        // function inside 
        the console.log (NUM); 
    } 
    Fun (); 
} 
Fn ();

Print Results: 20.