Detailed explanation of the principle and function of JavaScript closure

Introduction

illustrate

This article introduces the role, purpose and principle of JavaScript closures.

Definition of closure

Closure means that the inner function can always access the variables and parameters declared in the outer function, even in the outer function.

After the number is returned (lifetime expires).

The role (characteristics) of closures

1. Functions within functions

2. Internal functions can reference parameters or variables of external functions

3. The parameters and variables of the external function will not be garbage collected because they are referenced by the internal function.

Closures and global variables

Uses of closures

Currying

Different functions can be generated through parameters.

function makeWelcome(x) {
	return function(y) {
		return x + y;
	};
}
 
let sayHello = makeWelcome("Hello,");
let sayHi = makeWelcome("Hi,");
 
console.log(sayHello("Tony"));
console.log(sayHi("Tony"));

result

Hello, Tony

Hi, Tony

Implementing public variables

Requirement: Implement an accumulator that increases once each time it is called.

function makeCounter(){
	let count = 0;
	function innerFunction(){
		return count++;
	}
	return innerFunction;
}
let counter = makeCounter();
 
console.log(counter());
console.log(counter());
console.log(counter());

result

0

1

2

cache

Imagine that there is a function object whose processing is very time-consuming. The calculated value can be stored. When this function is called, it is first searched in the cache. If it is not found, it will be calculated, then the cache will be updated and the value will be returned; if it is found, the found value will be returned directly.

Closures can do this because they do not release external references, so the value inside the function can be preserved.

For simplicity, this article directly writes an example of read-write cache. (Instead of calculating it if it cannot be read, and then storing it in cache).

let cache = function () {
	// Map allows keys to be of any type. If you write: let storage = {}, the key can only be a string let storage = new Map();
	return {
		setCache: function (k, v) {
			storage[k] = v;
		},
		getCache: function (k) {
			return storage[k];
		},
		deleteCache: function (k) {
			delete storage[k];
		}
	}
}();
 
cache.setCache('a', 1);
console.log(cache.getCache('a'))

result

1

Encapsulation (privatization of attributes)

Internal variables can only be accessed through the provided closure. (This method is not good, it is recommended to use the prototype chain).

let person = function(){
	//The variable scope is inside the function and cannot be accessed from outside let name = "defaultName";
 
	return {
		getName: function(){
			return name;
		},
		setName: function(newName){
			name = newName;
		}
	}
}();
 
console.log(person.name);
console.log(person.getName());
person.setName("Hello");
console.log(person.getName());

result

undefined

defaultName

Hello

The principle of closure

Take the counter as an example:

function makeCounter() {
	let count = 0;
	return function() {
		return count++;
	};
}
let counter = makeCounter();
console.log(counter());
console.log(counter());
console.log(counter());

result

0

1

2

At the beginning of each makeCounter() call, a new LexicalEnvironment object is created to store the variables for that makeCounter runtime.

Thus, we have two levels of nested Lexical Environments:

The execution of makeCounter() creates a nested function that takes up just one line: return count++ . We haven't run it yet, we've only created it.

All functions remember the lexical environment in which they were created when they were "born". Rationale: All functions have a hidden attribute called [[Environment]] that holds a reference to the Lexical Environment in which the function was created:

Thus, counter.[[Environment]] has a reference to the {count: 0} lexical environment. This is how a function remembers where it was created, regardless of where the function is called. The [[Environment]] reference is set when the function is created and is stored permanently.

Later, when counter() is called, a new Lexical Environment is created for that call, and its outer Lexical Environment reference is obtained from counter.[[Environment]]:

Now, when the code in counter() looks for the count variable, it first searches its own Lexical Environment (which is empty, since there are no local variables there), then the Lexical Environment of the outer makeCounter(), and fixes the count variable wherever it finds it.

Modify (update the variable in the lexical environment where the variable exists).

This is the status after execution:

If we call counter() multiple times, the count variable will increase to 2, 3, etc. at the same position.

Garbage Collection

Introduction

Normally, after a function call is completed, the Lexical Environment and all the variables within it are deleted from memory, since there are no longer any references to them.

Like any other object in JavaScript, a Lexical Environment is kept in memory only as long as it is reachable. However, if there is a nested function that is still reachable after the function ends, it has an [[Environment]] attribute that refers to the Lexical Environment.

If the Lexical Environment is still reachable after the function completes, the nested function remains in effect. For example:

function f() {
    let value = 123;
    return function() {
        alert(value);
    }
}
// g.[[Environment]] stores a reference to the Lexical Environment of the corresponding f() call let g = f();

If f() is called multiple times, and the returned function is saved, all corresponding LexicalEnvironment objects are also kept in memory. For example:

function f() {
    let value = Math.random();
    return function () {
        alert(value);
    };
}
 
// 3 functions in an array, each associated with the lexical environment from the corresponding f() let arr = [f(), f(), f()];

When a LexicalEnvironment object becomes unreachable, it dies (just like any other object). In other words, it exists only as long as at least one nested function refers to it.

In the following code, when the nested function is deleted, its enclosing Lexical Environment (and the value within it) is also deleted from memory:

function f() {
    let value = 123;
    return function() {
        alert(value);
    }
} 
let g = f(); // While the g function exists, the value is retained in memory g = null; // Now the memory is cleaned up

Optimization in actual development

As we have seen, in theory when a function is reachable, all variables outside it will also exist. But in reality, JavaScript engines will try to optimize it. They analyze variable usage, and if it's obvious from the code that there are unused external variables, they'll be removed.

An important side effect of this in V8 (Chrome, Opera) is that such variables will not be available in debugging.

Open the Chrome browser's developer tools and try running the following code.

    function f() {
        let value = Math.random();
        function g() {
            debugger;
        }
        return g;
    } 
    let g = f();
    g();

When the code executes to the "debugger;" place, it will pause. At this time, enter console.log(value); in the console.

Result: Error: VM146:1 Uncaught ReferenceError: value is not defined

This can lead to interesting debugging issues. For example, we can see an external variable with the same name instead of the expected variable:

let value = "Surprise!";
function f() {
    let value = "the closest value";
    function g() {
        debugger;
    }
    return g;
}
let g = f();
g();

When the code executes to the "debugger;" place, it will pause. At this time, enter console.log(value); in the console.

Result: Output: Surprise.

The above is the detailed content of the principle and function of JavaScript closure. For more information about JavaScript closure, please pay attention to other related articles on 123WORDPRESS.COM!