1024programmer Java Detailed explanation of JavaScript scope chain examples

Detailed explanation of JavaScript scope chain examples

This article describes the Javascript scope chain with examples. Share it with everyone for your reference, the details are as follows:

As in other languages, the scope of variables and functions reveals the search paths for those variables and functions. For Javascript, it is more important to understand scope, because in Javascript, scope can be used to determine the value of this, and Javascript has closures, which can access the scope of the external environment.
Every Javascript function is an instance of the Function object. The Function object has an internal property [[Scope]], which can only be accessed by the Javascript engine. The scope chain of a function can be accessed through the [[Scope]] attribute, so that variables and functions can be searched and judged in which active object in the scope chain the variables and functions are located.

Simple scope chain

When a function is created, because the function is an instance of the Function object, it will also have the internal attribute [[Scope]]. The Scope attribute points to a scope chain, which by default contains at least one global Object variables.

 function compare(value1, value2){
   if (value1  value2) {
     return 1;
   } else {
     return 0;
   }
 }
 var result = compare(5, 10);

 

The above code first defines a compare() function, and then calls this function in the global scope. When creating the compare() function, the scope chain of the function is as shown below:

When the compare() function is called and executed in the global scope, the Javascript engine will create an internal object of the runtime context (execution context). A runtime context defines a function The execution environment. The runtime context is different every time a function is executed, so multiple calls will result in the creation and destruction of multiple runtime contexts.

Each runtime context has its own scope chain for the resolution of identifiers such as variables and functions.

The runtime context is created when a function call is executed and is destroyed when the function completes execution. When the runtime context is created, the object in the [[Scope]] attribute of the called function will first be copied, and then an active object (used as a variable object) will be created and pushed into the run The front end of the context scope chain. For the runtime context of the compare() function in this example, its scope chain contains two variable objects: the activation object of compare() and the global variable object of compare() (global object).

For a simple scope chain, that’s it, but the situation with closures is different.

The scope chain of closures

 //step1: define createComparisonFunction
 function createComparisonFunction(propertyName){
   return function(object1, object2){
     var value1 = object1[propertyName];
     var value2 = object2[propertyName];
     if (value1  value2) {
       return 1;
     } else {
       return 0;
     }
   };
 }
 //step2: call createComparisonFunction
 var compare = createComparisonFunction("name");
 //step3: call compare
 var result = compare({name: "Nicholas"}, {name: "Gerg"});
 //step4: dereference closure for recycle memory
 compare = null;

 

We illustrate the scope chain in the following steps:

step1: Define createComparisonFunction;

After creating the createComparisonFunction function, createComparisonFunction can be called, so a Function object of createComparisonFunction is retained;
The object is retained in memory at this time:

1. Global Object

2. createComparisonFunction object & Scope Chain

step2: Execute createComparisonFunction;

During the execution of createComparisonFunction, the runtime context object + ScopeChain + activity object of createComparisonFunction will first be created, and then a closure (anonymous function) will be created,
The object is retained in memory when the function is executed:

1. Global Object
2. CreateComparisonFunction’s Function object + Scope Chain
3. Runtime context object of createComparisonFunction + Scope Chain
4. Active object of createComparisonFunction
5. Function object of Closure(anonymous) + Scope Chain

After createComparisonFunction is executed, the runtime context object + ScopeChain of createComparisonFunction will be destroyed, but the active object of createComparisonFunction will not be destroyed because it is referenced by the ScopeChain of the Closure (anonymous) object.

The object is retained in memory after the function is executed:

1. Global Object
2. CreateComparisonFunction’s Function object + Scope Chain
3. Function object of Closure(anonymous) + Scope Chain
4. Active object of createComparisonFunction

Compared with step1, after step2 is executed, two objects are added:

1. Function object of Closure(anonymous) + Scope Chain
2. Active object of createComparisonFunction

This is because the closure generated by executing createComparisonFunction is referenced by compare, and the Scope Chain of this closure function refers to the active object of createComparisonFunction, so the memory increases by these two objects.

step3: Execute compare;

When executing a closure (compare), the runtime context object + ScopeChain + activity object of the closure will first be created, and then the closure will be executed.

The object is retained in memory when the closure is executed:

1. Global Object
2. CreateComparisonFunction’s Function object + Scope Chain
3. Closure(anonymous) Function object + Scope Chain
4. Active object of createComparisonFunction
5. Runtime context of Closure(anonymous) + Scope Chain
6. Closure(anonymous) active object

After the closure Closure(anonymous) is executed, the active object of the closure Closure(anonymous) will be destroyed, and the runtime context + Scope Chain of the closure Closure(anonymous) will also be destroyed.

The object is retained in memory after the closure is executed:

1. Global Object
2. CreateComparisonFunction’s Function object + Scope Chain
3. Closure(anonymous) Function object + Scope Chain
4. Active object of createComparisonFunction

Compared with step2, after step3 is executed, the objects retained in the memory have not increased. This is the normal execution of a function.

Under normal circumstances, after executing a function, the objects retained in memory should be the same as before execution.

Because no new references are introduced in the execution closure, the objects retained in the memory remain consistent.

Then the question is, how can the active object of createComparisonFunction be destroyed?

We first look at the existence of the active object of createComparisonFunction because the Scope Chain of the Function object of the closure Closure (anonymous) refers to the active object of createComparisonFunction. The purpose is because the closure needs to access the propertyName in the active object of createComparisonFunction. Attributes.

If the Function object of the closure Closure (anonymous) is destroyed, the active object of createComparisonFunction will also be destroyed because it is not referenced by any object.

step4Release compare’s reference to the closure, so that the closure is not referenced by any object, and the closure is destroyed, so that the active object of createComparisonFunction will also be referenced by no object. Destroy, thus recycling the memory occupied by these objects.

The problem with using closures is that the memory consumption will be larger than that of ordinary functions. Because additional active objects need to be saved, when the closure is not needed, the closure needs to be dereferenced and the additional active objects occupied. of memory.

Objects retained in memory after step 4 is executed:

1. Global Object

2. CreateComparisonFunction’s Function object + Scope Chain

Compared with step1, after step4 is executed, no additional objects are retained in the memory, and the additional objects generated by the reference closure are recycled.

Readers who are interested in more Javascript-related content can check out the special topics of this site: “Javascript Object-Oriented Introductory Tutorial”, “Javascript Errors and Debugging Skills Summary”, “Javascript Data Structure and Algorithm Skills Summary”, “Javascript Traversal Algorithm” and Skills Summary” and “Javascript Mathematical Operation Usage Summary”

I hope this article will be helpful to everyone in Javascript programming.

This article is from the internet and does not represent1024programmerPosition, please indicate the source when reprinting:https://www.1024programmer.com/714791

author: admin

Previous article
Next article

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Contact us

181-3619-1160

Online consultation: QQ交谈

E-mail: [email protected]

Working hours: Monday to Friday, 9:00-17:30, holidays off

Follow wechat
Scan wechat and follow us

Scan wechat and follow us

Follow Weibo
Back to top
首页
微信
电话
搜索