1. Scope overview

In general, the name used in a piece of program code is not always valid and available, and the scope of the code that defines the name’s availability is the scope of the name. The use of scopes improves the locality of program logic, enhances the reliability of programs, and reduces name conflicts.

There are two types of scope in JavaScript (pre-ES6) :

  • Global scope
  • Local scope (function scope)

2. Global scope

The environment in which all code is executed (inside the entire script tag) or a separate JS file.

3. Local scope

Acting on the code environment within a function is called a local scope. It is also called function scope because it is related to functions.

4. JS has no block-level scope

  • Block scopes are included by {}.

  • In other programming languages (such as Java, c#, etc.), variables created in an if statement or loop can only be used in the same if statement or loop as the following Java code:

    Java has block-level scope:

    if(true){ int num = 123; system.out.print(num); // 123 } system.out.print(num); / / an errorCopy the code

{} is a scope in which num cannot be used outside the “{}” variable. JavaScript code, on the other hand, does not report errors.

There is no block-level scope in JS (prior to ES6)

if(true){ var num = 123; console.log(123); //123 } console.log(123); / / 123Copy the code

5. Scope of variables

In JavaScript, variables can be divided into two types, depending on their scope:

  • The global variable
  • A local variable

5.1. Global variables

Variables declared under a global scope are called global variables (variables defined outside the function).

  • Global variables can be used anywhere in the code
  • Variables declared by var in global scope are global variables
  • In special cases, variables declared without var in functions are also global variables (not recommended).

5.2. Local variables

Variables declared in a local scope are called local variables (variables defined inside a function)

  • Local variables can only be used inside the function
  • The variables declared by var inside a function are local variables
  • Function parameters are actually local variables

5.3. Difference between global and local variables

  • Global variables: they can be used anywhere and are only destroyed when the browser is closed, so they take up a lot of memory
  • Local variables: used only inside functions and initialized when the block of code in which they reside is executed; When the code block is finished running, it is destroyed, thus saving more memory

6. Scope chain

As long as the code is in a scope, the local scope written inside the function, not written inside any function is in the global scope; If there are functions within a function, then another scope can be created within that scope; According to this mechanism, a chain lookup to determine which data can be accessed by an inner function is called a scope chain.

Function f1() {var num = 123; function f2() { console.log( num ); } f2(); } var num = 456; f1();Copy the code

Scope chain: Takes the nearest approach to finding the final value of a variable

var a = 1; function fn1() { var a = 2; var b = '22'; fn2(); function fn2() { var a = 3; fn3(); function fn3() { var a = 4; console.log(a); / / a value? console.log(b); / / the value of b? } } } fn1();Copy the code