Web Front-end
JS Tutorial
Advanced front-end basics (2): Detailed illustration of execution context
Advanced front-end basics (2): Detailed illustration of execution context
We often encounter questions about assessment variable improvement in the early stages of learning JS or during interviews. For example, let’s start with a simpler one.
console.log(a); // 这里会打印出什么？ var a = 20;
Ignoring this example for the time being, let’s first introduce the most basic but also the most important concept in JavaScript, execution context (Execution Context).
Every time the controller switches to executable code, it enters an execution context. Execution context can be understood as the execution environment of the current code, which forms a scope. The running environment in JavaScript roughly includes three situations.
1. Global environment: JavaScript code will first enter this environment when running
2. Function environment: When the function is called and executed, it will enter the current function to execute the code
3.eval
Therefore, in a JavaScript program, multiple execution contexts must be generated. As mentioned in my previous article, the JavaScript engine will process them in a stack manner. The bottom of the stack is always the global context, and the top of the stack is the currently executing context.
When the code encounters the above three situations during execution, an execution context will be generated and placed on the stack. After the context on the top of the stack is executed, it will automatically pop off the stack. In order to understand this process more clearly, we will show it to you based on the following examples and diagrams.
var color = 'blue';
function changeColor() {
var anotherColor = 'red';
function swapColors() {
var tempColor = anotherColor;
anotherColor = color;
color = tempColor;
}
swapColors();
}
changeColor();We use ECStock to represent the stack that handles the execution context group. We can easily know that the first step is to push the global context onto the stack.
After the global context is pushed onto the stack, the executable code in it begins to execute until it encounters changeColor(). This sentence activates the function changeColor to create its own execution context, so the first The second step is to push the execution context of changeColor onto the stack.
After the context of changeColor is pushed onto the stack, the controller begins to execute the executable code in it, and activates an execution context after encountering swapColors(). Therefore, the third step is to push the execution context of swapColors onto the stack.
In the executable code of swapColors, there is no other situation that can generate an execution context, so this code is successfully executed and the context of swapColors is popped from the stack. .
After the execution context of swapColors pops up, the executable code of changeColor continues to be executed, and no other execution context is encountered. After the execution is completed successfully, it pops up. In this way, there is only a global context in ECStack.
The global context is popped after the browser window is closed.
Note: In a function, encountering return can directly terminate the execution of the executable code, so the current context will be popped directly from the stack.
: Detailed illustration of execution context "148705177874278Advanced front-end basics (2): Detailed illustration of execution context")
#After understanding this process in detail, we can summarize some conclusions about the execution context.
1. Single thread
2. Synchronous execution, only the context on the top of the stack is executing, other contexts need to wait
3. There is only one global context, it Pop the stack when the browser is closed
4. There is no limit to the number of execution contexts of a function
5. Every time a function is called, there will be a new execution context for it Create, even if it is a called function of itself.
In order to consolidate the understanding of execution context, let's draw the evolution of an example. This is a simple closure example.
function f1(){
var n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999Because the function f2 in f1 is not called and executed in the executable code of f1, f2 will not create a new context when f1 is executed, and one is not created until result is executed. new. The specific evolution process is as follows.
:%20Detailed%20illustration%20of%20execution%20context "148705182659493Advanced front-end basics (2): Detailed illustration of execution context")
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
PHP and Vue: a perfect pairing of front-end development tools
Mar 16, 2024 pm 12:09 PM
PHP and Vue: a perfect pairing of front-end development tools. In today's era of rapid development of the Internet, front-end development has become increasingly important. As users have higher and higher requirements for the experience of websites and applications, front-end developers need to use more efficient and flexible tools to create responsive and interactive interfaces. As two important technologies in the field of front-end development, PHP and Vue.js can be regarded as perfect tools when paired together. This article will explore the combination of PHP and Vue, as well as detailed code examples to help readers better understand and apply these two
C# development experience sharing: front-end and back-end collaborative development skills
Nov 23, 2023 am 10:13 AM
As a C# developer, our development work usually includes front-end and back-end development. As technology develops and the complexity of projects increases, the collaborative development of front-end and back-end has become more and more important and complex. This article will share some front-end and back-end collaborative development techniques to help C# developers complete development work more efficiently. After determining the interface specifications, collaborative development of the front-end and back-end is inseparable from the interaction of API interfaces. To ensure the smooth progress of front-end and back-end collaborative development, the most important thing is to define good interface specifications. Interface specification involves the name of the interface
Questions frequently asked by front-end interviewers
Mar 19, 2024 pm 02:24 PM
In front-end development interviews, common questions cover a wide range of topics, including HTML/CSS basics, JavaScript basics, frameworks and libraries, project experience, algorithms and data structures, performance optimization, cross-domain requests, front-end engineering, design patterns, and new technologies and trends. . Interviewer questions are designed to assess the candidate's technical skills, project experience, and understanding of industry trends. Therefore, candidates should be fully prepared in these areas to demonstrate their abilities and expertise.
Is Django front-end or back-end? check it out!
Jan 19, 2024 am 08:37 AM
Django is a web application framework written in Python that emphasizes rapid development and clean methods. Although Django is a web framework, to answer the question whether Django is a front-end or a back-end, you need to have a deep understanding of the concepts of front-end and back-end. The front end refers to the interface that users directly interact with, and the back end refers to server-side programs. They interact with data through the HTTP protocol. When the front-end and back-end are separated, the front-end and back-end programs can be developed independently to implement business logic and interactive effects respectively, and data exchange.
Exploring Go language front-end technology: a new vision for front-end development
Mar 28, 2024 pm 01:06 PM
As a fast and efficient programming language, Go language is widely popular in the field of back-end development. However, few people associate Go language with front-end development. In fact, using Go language for front-end development can not only improve efficiency, but also bring new horizons to developers. This article will explore the possibility of using the Go language for front-end development and provide specific code examples to help readers better understand this area. In traditional front-end development, JavaScript, HTML, and CSS are often used to build user interfaces
How to implement instant messaging on the front end
Oct 09, 2023 pm 02:47 PM
Methods for implementing instant messaging include WebSocket, Long Polling, Server-Sent Events, WebRTC, etc. Detailed introduction: 1. WebSocket, which can establish a persistent connection between the client and the server to achieve real-time two-way communication. The front end can use the WebSocket API to create a WebSocket connection and achieve instant messaging by sending and receiving messages; 2. Long Polling, a technology that simulates real-time communication, etc.
Django: A magical framework that can handle both front-end and back-end development!
Jan 19, 2024 am 08:52 AM
Django: A magical framework that can handle both front-end and back-end development! Django is an efficient and scalable web application framework. It is able to support multiple web development models, including MVC and MTV, and can easily develop high-quality web applications. Django not only supports back-end development, but can also quickly build front-end interfaces and achieve flexible view display through template language. Django combines front-end development and back-end development into a seamless integration, so developers don’t have to specialize in learning
Combination of Golang and front-end technology: explore how Golang plays a role in the front-end field
Mar 19, 2024 pm 06:15 PM
Combination of Golang and front-end technology: To explore how Golang plays a role in the front-end field, specific code examples are needed. With the rapid development of the Internet and mobile applications, front-end technology has become increasingly important. In this field, Golang, as a powerful back-end programming language, can also play an important role. This article will explore how Golang is combined with front-end technology and demonstrate its potential in the front-end field through specific code examples. The role of Golang in the front-end field is as an efficient, concise and easy-to-learn
