laitimes

Front-end -JavaScript scope and run analysis scopeglossional scope function scope block scope static scope chain execution context example thinking question

author:Code farmer uncle

<h1 class="pgc-h-arrow-right" data-track="1" > scope</h1>

Scopes in JavaScript are divided into global scope, function scope, and block scope.

<h1 class="pgc-h-arrow-right" data-track="3" > global scope</h1>

Variables declared globally can be accessed anywhere.

<h1 class="pgc-h-arrow-right" data-track="7" > function scope</h1>

Variables declared within a function can only be accessed from within the function.

< h1 class="pgc-h-arrow-right" data-track="11" > block scope</h1>

ES6 introduces the let and const keywords, which declare variables that are only accessible from within that block of code.

<h1 class="pgc-h-arrow-right" data-track="15" > static scope</h1>

Determined at lexical analysis time (compile time).

<h1 class="pgc-h-arrow-right" data-track="19" > scope chain</h1>

When JavaScript is running, the engine will first look for the variable in the current scope, if it can't find it, it will look up the parent scope layer by layer, all the way to the top-level global scope, and if it still can't find it, it will return undefined.

Front-end -JavaScript scope and run analysis scopeglossional scope function scope block scope static scope chain execution context example thinking question

Scope chain

<h1 class="pgc-h-arrow-right" data-track="25" > execution context</h1>

An execution context is an environment that executes a piece of JavaScript that stores some of the information necessary to execute code. The execution context is divided into a global execution context and a function execution context.

Global execution context, there will be only one in a program, and code other than functions runs in the global execution context.

Function execution context, which creates a corresponding function execution context each time it is called.

The execution context contains the Variable environment, the Scope chain, which points to.

The variable environment, all the variable and object references and invocation parameters inside the function.

A scope chain, which consists of references to variables other than the current function.

this points.

From the memory structure of the JavaScript runtime, the call stack is a collection of storage execution contexts.

Front-end -JavaScript scope and run analysis scopeglossional scope function scope block scope static scope chain execution context example thinking question

js memory

< h1 class="pgc-h-arrow-right" data-track="35" > example</h1>

Example 1

Here is a common JavaScript example that runs a process analysis:

Create a global execution context and enter the call stack.

Call the function say(), create the function execution context of say(), and merge it into the call stack.

After executing the say() function returns the result, updating the s variable in the global execution context.

Pop the execution context of the say function onto the stack.

Front-end -JavaScript scope and run analysis scopeglossional scope function scope block scope static scope chain execution context example thinking question
Front-end -JavaScript scope and run analysis scopeglossional scope function scope block scope static scope chain execution context example thinking question

Example 2

This example differs from the above in that the return value is a function, an anonymous function also called a closure that accesses variables outside the function, and can still hold references to external variables even after the outer function execution context is ejected from the stack. Run the analysis as follows:

After executing the say() function returns the result, update the s variable in the global execution context, s is the function type, it still holds the say var = msg reference.

Execute s() to create the function execution context of s().

Pop the execution context of the s() function onto the stack.

Front-end -JavaScript scope and run analysis scopeglossional scope function scope block scope static scope chain execution context example thinking question

<h1 class="pgc-h-arrow-right" data-track="57" > thinking questions</h1>

You can try to dynamically execute the following code in your mind.

Topic 1:

Topic 2:

Topic 3:

Topic 4:

Check out how JavaScript works

Front-end - How JavaScript works