Home Web Front-end JS Tutorial A brief discussion on execution environment (scope) and scope chain in JavaScript

A brief discussion on execution environment (scope) and scope chain in JavaScript

Dec 13, 2016 pm 04:49 PM

I believe that many beginners do not have a good understanding of the execution environment and scope chain in JavaScript. Here, I will share with you according to my own understanding.

Generally, we divide the execution environment into global execution environment and local execution environment. The local execution environment can also be called function execution environment. So what exactly is an execution environment? In layman's terms, the execution environment is the environment in which the code is executed. Let's take a look at the following code and analyze it further.

<script><br>var name="zhuzhenwei";
function changeName(){
    if (name=="zhuzhenwei"){
          name="heting";
    }else{
          name="zhuzhenwei";
    }
}
changeName();
console.log(name); //heting<br></script>
Copy after login

As shown in the above code, when the first statement is executed, the environment where the statement is located is the global execution environment. It should be noted that: each execution environment has a variable object associated with it. For The global execution environment, and the object associated with it is the window object. Immediately afterwards, the following statement declares a function (note: this only declares the function, the internal code will not be executed until it is called).​ This function is also in the global execution environment. Finally, we called the changeName() function. Once the function is called, it immediately jumps to the execution environment of the changeName() function (that is, the function execution environment). Once it enters the execution environment, it starts to create the corresponding variables inside the function (such as Suppose var appears in the function a=12; code like this), it will not be created without calling the function, and the variable object related to it is considered to be an active object (the active object initially contains only one variable, that is, the arguments object), from top to Execute the statement below. At the same time, when the code is executed in the function environment, a scope chain of the variable object will be created. This scope chain contains the variable object of changeName() and the global variable object.

The scope chain is actually the scope that we can access from the front end to the end, that is, ensuring orderly access to all variables and functions that have access to the execution environment, where the front end refers to the variable object where the currently executing code is located , here is now the variable object of the changeName() function, and the end is the global variable object. For example: when we execute the function, we need to find an identifier. This is to search through the end of the scope chain. If the scope chain If you can't find it at the end, you keep searching upward until you reach the window object. Although I did not mention the scope chain in the global environment, in fact the scope chain also exists in the global environment, but there is only one global variable object. It's obvious: accessing local variables is faster than accessing global variables because there is no need to search up the scope chain. Obviously, the scope chain changes dynamically depending on the execution environment in which the code is located.

After the changeName() function is executed, that is, after the execution of the code in the function execution environment is completed, the local variables and local objects in the environment will be destroyed immediately (if the variable is not declared with var, it indicates that it is a global variable and will not Destroyed after the code in the local environment is executed), then the execution environment changes from the function execution environment to the global execution environment, and continues to execute the console.log(name); statement. However, if we close the web page or browser, the global environment will also be destroyed.

The summary is as follows:

The execution environment also becomes the scope, and the execution environment determines the life cycle of variables.

The execution environment is divided into global execution environment and local execution environment. Every time you enter an execution environment, a scope chain for searching for variables and functions will be created, so we think that this scope chain changes dynamically.

The local environment of a function not only has access to variables in the function scope, but also has access to its containing environment (parent environment) and even the global environment; while the global environment can only access variables and functions defined in the global environment (local Variables in the environment that are not declared using var are also global variables) and cannot access data in the local environment (not all data is said, precisely because global variables can be accessed). Note: Parameters in a function are local variables of the function.

The above is the entire content of the execution environment (scope) and scope chain in JavaScript. I hope the content of this article can bring some help to everyone's study or work. If you have any questions, you can leave a message to communicate, and you want to know more. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What should I do if I encounter garbled code printing for front-end thermal paper receipts? What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

Who gets paid more Python or JavaScript? Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

How to merge array elements with the same ID into one object using JavaScript? How to merge array elements with the same ID into one object using JavaScript? Apr 04, 2025 pm 05:09 PM

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

Demystifying JavaScript: What It Does and Why It Matters Demystifying JavaScript: What It Does and Why It Matters Apr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

The difference in console.log output result: Why are the two calls different? The difference in console.log output result: Why are the two calls different? Apr 04, 2025 pm 05:12 PM

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? How to achieve parallax scrolling and element animation effects, like Shiseido's official website? or: How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? Apr 04, 2025 pm 05:36 PM

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

TypeScript for Beginners, Part 2: Basic Data Types TypeScript for Beginners, Part 2: Basic Data Types Mar 19, 2025 am 09:10 AM

Once you have mastered the entry-level TypeScript tutorial, you should be able to write your own code in an IDE that supports TypeScript and compile it into JavaScript. This tutorial will dive into various data types in TypeScript. JavaScript has seven data types: Null, Undefined, Boolean, Number, String, Symbol (introduced by ES6) and Object. TypeScript defines more types on this basis, and this tutorial will cover all of them in detail. Null data type Like JavaScript, null in TypeScript

Can PowerPoint run JavaScript? Can PowerPoint run JavaScript? Apr 01, 2025 pm 05:17 PM

JavaScript can be run in PowerPoint, and can be implemented by calling external JavaScript files or embedding HTML files through VBA. 1. To use VBA to call JavaScript files, you need to enable macros and have VBA programming knowledge. 2. Embed HTML files containing JavaScript, which are simple and easy to use but are subject to security restrictions. Advantages include extended functions and flexibility, while disadvantages involve security, compatibility and complexity. In practice, attention should be paid to security, compatibility, performance and user experience.

See all articles