preface

The concept of scope is key to understanding JS, but most new students, like me, have little or no knowledge of it. Scope is critical from both a performance and a functional perspective.

What are scopes and scope chains

1. Each JS Function is represented as an object, which is an instance of the Function object. Function objects, like other objects, have programmatically accessible properties, including an internal property [[scope]] that cannot be accessed directly by code. [[scope]] contains the set of objects in the scope created. This set is called the scope chain of the function. It determines which objects can be accessed by functions.

Create a function fn

function fn(n1, n2){
	let sum = n1 + n2;
    return sum;
}
Copy the code

When a function is created, its scope chain inserts an object variable that contains all global objects.3. When fn is executed, an internal object called “execution environment” is created. It has the following characteristics:

A. Each execution of a function creates a unique execution environment;

B. Each execution environment has its own chain of scopes;

C. Each execution environment creates a new object called an “active object” that contains all local variables, named parameters, parameter sets, and this. And is pushed to the front of the scope chain;

D. After the function is executed, the execution environment is destroyed, and the active object is also destroyed.

Understanding the execution environment helps you understand closures.Copy the code
const total = fn(1.2);
Copy the code

Each time a function encounters a variable during execution, it undergoes identifier parsing to determine where to fetch or store data. The procedure searches the scope chain of the execution environment starting at the head. This search process is performance-intensive, so it is recommended to use local variables within functions whenever possible to reduce search time.

Closure principle

Closures are one of the most powerful features of JS, allowing functions to access data outside their local scope. The use of closures can be found everywhere, so I don’t want to go into details here.

Here’s an example:

function f1(){
	var name = 'xiaohong';
    function sub(){
    	console.log('my name is'+name);
    }
    return sub;
}
Copy the code

The sub function inside f1 is a closure. It is created when f1 is executed and has access to the name variable of its scope. In order for the closure to access name, a specific scope chain must be created.

When the closure code executes, it also creates its own execution environment, which in [[scope]] references the parent function’s live object, as well as the global object, and adds it to the scope chain. The closure’s own live objects are added to the front of the closure’s scope chain.

Because the closure's [[scope]] and F1's [[scope]] reference the same live object, there are strong side effects when using closures. In general, closures are referred to by other attributes, which results in an increased memory overhead as active objects cannot be destroyed. Closures therefore cause memory leaks.Copy the code