The scope chain

Concept: When code executes in the environment, it creates a scope chain of variable objects. This chain of scopes ensures orderly access to all variables and functions in the execution environment. When the desired variable is not found in the current scope, it looks up layer by layer until it finally looks up in the global scope.

The execution environment

Concept: The execution environment defines other data that variables and functions have access to and determines their behavior. Each execution environment has an associated variable object where all variables and functions defined in the environment are stored.

Global scope

Concept: The global scope is the outermost execution environment. In the browser, the global execution environment is treated as the Window object. All global variables and functions are treated as properties and methods of the Window object.

Function scope

Concept: Function scope refers to variables declared inside a function. Variables in the outer scope can be accessed from the function scope, but variables in the inner scope cannot be accessed from the outer scope.

Implementation:

var a = 1;
function check() {
    var b = 2;
    console.log(a);
}

check(); / / 1
console.log(b); // ReferenceError
Copy the code

Lexical scope and dynamic scope

concept

Lexical scope means that the scope of a function is determined when the function is defined.

Dynamic scoping means that the scope of a function is determined at the time the function is called.

let value = 1;

function foo() {
    console.log(value);
}

function bar() {
    let value = 2;
    foo();
}

bar(); / / 1

Copy the code
  1. Given static/lexical scope in JavaScript, let’s examine the execution of the above code:

Function foo (value); foo (value);

If it doesn’t, look for the code at the top, where value is equal to 1,

So it prints 1.

  1. Assuming JavaScript is dynamically scoped, let’s examine the execution of the above code:

When we execute foo, we still look inside foo to see if there is a local variable value.

If not, look for the value variable from within the scope of the calling function, that is, the bar function,

So it prints 2.

Code the measured

inner = 'window';

function say() {
    console.log(inner);
    console.log(this.inner);
}

var obj1 = (function() {
    var inner = 1-1 ' ';
    return {
        inner: '2'.say: function() {
            console.log(inner);
            console.log(this.inner); }}}) ();var obj2 = (function() {
    var inner = '2-1';
    return {
        inner: '2-2'.say: function() {
            console.log(inner);
            console.log(this.inner); }}}) (); say();// window window

obj1.say();          1 / / 1-1-2

obj2.say();          / / 2-1-2

obj1.say = say;

obj1.say();          // window 1-2

obj1.say = obj2.say;

obj1.say();          1 / / 2-1-2
Copy the code

Block-level scope

concept

Concept:

Block-level scopes are declared by lets and const. Variables that are declared cannot be accessed outside the block-level scope.

Block-level scopes are created inside functions and code blocks.

Implementation:

I defined in the for loop

Features:

  1. No variable promotion
  2. Cannot duplicate declaration
  3. You can define I in a for loop

Code the measured

Using the LET declaration

let sum = 0;
for(let i=0; i<5; i++) {
    sum += i;
}

console.log(sum);   / / 10
console.log(i);     // Uncaught ReferenceError: i is not defined
Copy the code

Using var declarations

let sum = 0;
for(var i=0; i<5; i++) {
    sum += i;
}

console.log(sum);   / / 10
console.log(i);     / / 5
Copy the code