Detailed discussion about JavaScript Execution Context

JavaScript Execution Context is an important concept that defines how code is interpreted and executed during program execution. Each function call or execution of a block of code creates an execution context, which controls the scope of all variables, objects, and functions while the code is running.

What is Execution Context?

Execution Context is an environment created during the execution of JavaScript code. It acts like a container that stores the data of specific function variables, objects and functions. Basically, the Execution Context tells the JavaScript engine where to find variables and functions and how to execute them.

Types of Execution Context

Execution Context can be mainly of three types:

1. Global Execution Context (GEC): When a script is run for the first time, a global execution context is created. It is created only once and contains the global object (eg window in the browser) and this binding. GEC does not end until the entire script has finished executing.
2. Function Execution Context (FEC): Every time a function is called, a new execution context is created. Each function has its own execution context, which has its own scope, variables, and this binding.
3. Eval Execution Context: A new execution context is created when the eval() function is invoked. However, using eval() is generally discouraged because it can cause problems for code readability and security.

Components of Execution Context:

Execution Context generally consists of three main parts:

1. Variable Object (VO) / Lexical Environment: Stores all variables, function declarations and function arguments.

console.log(a); // Output: undefined
var a = 5;

function myFunction() {
    console.log(b); // Output: undefined
    var b = 10;
}
myFunction();

1. Scope Chain: Scope Chain is a chain that makes all variables and functions accessible from the current execution context to its previous context. It determines which variables can be found where.

var globalVar = "I'm Global";

function outerFunction() {
    var outerVar = "I'm in outer function";

    function innerFunction() {
        var innerVar = "I'm in inner function";
        console.log(globalVar); // "I'm Global"
        console.log(outerVar);  // "I'm in outer function"
    }

    innerFunction();
}

outerFunction();

1. this Keyword Binding: this is a special keyword, which varies according to the Execution Context. In Global Execution Context this refers to the global object, and in Function Execution Context it depends on how the function is called.

console.log(this); // Global context, refers to `window` in browsers.

var myObject = {
    name: "JavaScript",
    sayName: function() {
        console.log(this.name); // `this` refers to `myObject`.
    }
};

myObject.sayName(); // Output: "JavaScript"

function MyConstructor() {
    this.prop = "Property";
}

var obj = new MyConstructor();
console.log(obj.prop); // Output: "Property"

Execution Context Lifecycle:

The lifecycle of

Execution Context is divided into three phases:

1. Creation Phase: In this phase the Execution Context is created and all important components like Scope Chain, Variable Object and this are created and initialized.
2. Execution Phase: In this phase the code is executed, that is, variables are assigned values ​​and functions are executed.
3. Garbage Collection: At the end of the execution context, if it is no longer needed, it is removed from memory and the associated resources are freed.

Conclusion

Execution Context is the foundation of JavaScript that determines how the code will execute. It provides proper management of variables, functions, and scopes. A proper understanding of Execution Context helps to better understand and manage the functionality and execution steps of JavaScript code.

The above is the detailed content of Detailed discussion about JavaScript Execution Context. For more information, please follow other related articles on the PHP Chinese website!