This is the 27th day of my participation in the More Text Challenge. For more details, see more text Challenge

Interviewer: Tell me about your understanding of scopes and scope chains.

Me:… 💥

scope

Scope is the execution environment of code, global execution environment is global scope, function execution environment is private scope, they are all stack memory. The execution environment defines the additional data that a variable or function has access to and determines their respective behavior. Each execution environment has a variable object associated with it, where all the variables and functions defined in the environment are stored. Although the code we write cannot access this object, the parser uses it behind the scenes when processing the data.

  1. Global scope

    • Outermost functions and variables defined outside the outermost functionsHas global scope
    • allNo directly assigned variable definedAutomatically declared as global scope
    • allThe window objectProperties of have global scope
    • The downside of global scope is that too many global scope variables canContaminate the global namespaceEasy to causeNaming conflicts.

  2. Function scope

    • Function scope A variable declared inside a function, usually accessible only to a fixed snippet of code
    • Scopes are layered,An inner scope can access an outer scopeNot vice versa

  3. Block-level scope

    • Block-level scopes can be declared using the new let and const directives in ES6. Block-level scopes can be created in a function or in a block of code (a code fragment wrapped by {}).
    • Variables declared as let and const do not have variable promotion and cannot be declared repeatedly
    • A good place to bind block-level scope is within a loop, which limits the declared counter variables to within the loop.

The scope chain

Look for the required variable in the current scope, but the scope does not have the variable, then the variable is free. If you cannot find the variable in your own scope, you go to the parent scope, and then to the upper scope, until you access the Window object, and then it is terminated. This layer of relationship is called the scope chain. The purpose of the scope chain is to ensure orderly access to all variables and functions that the execution environment has access to. Through the scope chain, variables and functions in the outer environment can be accessed. The scope chain is essentially a list of Pointers to variable objects. A variable object is an object that contains all the variables and functions in the execution environment. The front end of the scope chain is always a variable object for the current execution context.

The variable object of the global execution context (that is, the global object) is always the last object in the scope chain.

conclusion

1. A scope chain stores a collection of execution contexts

2. If the current scope does not use a variable that is not defined in the scope, it will search up the scope chain.

The code to understand

var z = 1 
/ / 1. Definition of Tim, Tim. [[scope]] = GO: {z: 1, Tim: [Function: Tim]}
function tim(){
  / / 3. Definition of cope cope. [[scope]] = Tim. [[scope]] = Tim (AO) : {cope: [Function: cope], y: undefined} = > GO
   function cope(){
       var x= 2;
         // 6.cope(AO) has no y attribute, it will be found up the scope chain, it will not be mounted on GO
       y=3
   }
  //4.tim(AO):{cope:[Function: cope],y:4}
   var y = 4
   //5.cope.[[scope]] = cope(AO):{x:undefined}=>tim(AO)=>GO
   cope()
  //7.tim(AO):{cope:[Function: cope],y:4}
   console.log(y)  / / 3
}
/ / 2. Tim Tim execution. [[scope]] = Tim (AO) : {cope: [Function: cope], y: undefined} = > GO: {z: 1, Tim: [Function: Tim]}
tim()
Copy the code