Shulou(Shulou.com)06/02 Report--

The editor will share with you an example analysis of the principle and function of JavaScript closures. I hope you will gain something after reading this article. Let's discuss it together.

Brief introduction

Description

This paper introduces the function, use and principle of JavaScript closure.

The definition of closure

Closure means that an internal function can always access variables and parameters declared in its external function, even in its external function

After the number has been returned (end of life).

The function of closure (characteristic)

1. Function nested function

two。 Internal functions can refer to arguments or variables of external functions

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

Closures and global variables

Corialization of the use of closures

Different functions can be generated by 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

Implement public variables

Requirements: implement an accumulator that is incremented with each call.

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

one

two

Caching

Imagine a time-consuming function object that can store the calculated value and look it up in the cache first when the function is called. If it cannot be found, it is evaluated, then the cache is updated and the value is returned; if it is found, the value found is returned directly.

A closure can do this because it does not release external references, so the values inside the function can be preserved.

For simplicity, we directly write to the read-write cache example. (instead of calculating if you can't read it, then saving it to the cache).

Let cache = function () {/ / Map allows keys to be of any type. If you write let storage = {}, the key can only be the 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 ('asides, 1); console.log (cache.getCache (' a'))

Result

one

Encapsulation (property privatization)

Internal variables can only be accessed in the form of closures provided. (this method is not good, it is recommended to use prototype chain).

Let person = function () {/ / variable scope is inside the function, let name = "defaultName" cannot be accessed externally; 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

one

two

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

Therefore, we have two layers of nested lexical environment:

A nested function with only one line is created during the execution of makeCounter (): return count++. We haven't run it yet, we just created it.

All functions remember the lexical environment in which they were created when they were "born". How it works: all functions have a hidden property named [[Environment]], which holds a reference to the lexical environment in which the function was created:

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

Later, when counter () is called, a new lexical environment is created for the call, and its external lexical environment reference is obtained from counter. [[Environment]]:

Now, when the code in counter () looks for count variables, it first searches its own lexical environment (empty because there are no local variables), then the lexical environment of external makeCounter (), and fixes it wherever it is found

Change (update the variable in the lexical environment in which the variable is located).

This is the status after execution:

If we call counter () multiple times, the count variable will increase to 2, 3, and so on in the same place.

Brief introduction of garbage collection

Typically, when the function call is complete, the lexical environment and all variables in it are removed from memory because there are no references to them now.

Like any other object in JavaScript, the lexical environment is kept in memory only when it is reachable. However, if a nested function is reachable after the function ends, it has the [[Environment]] attribute of the reference lexical environment.

If the lexical environment is still reachable after the function execution is complete, the nested function is still valid. For example:

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

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

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

When the lexical environment object becomes unreachable, it dies (just like any other object). In other words, it exists only if at least one nested function references it.

In the following code, when a nested function is deleted, its closed lexical environment (and its value) is also removed from memory:

Function f () {let value = 123; return function () {alert (value);}} let g = f (); / / when the g function exists, this value is retained in memory g = null; / / now the memory has been cleaned up for optimization in actual development

As we can see, in theory, when a function is reachable, all variables outside it will also exist. But in practice, the JavaScript engine will try to optimize it. They analyze the use of variables and delete them if it is clear from the code that there are unused external variables.

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

Open the developer tool for the Chrome browser and try to run 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 pauses, and type console.log (value); in the console.

Result: error report: VM146:1 Uncaught ReferenceError: value is not defined

This can lead to interesting debugging problems. For example, what we can see is an external variable with the same name, not 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 pauses, and type console.log (value); in the console.

Results: output: Surprise.

After reading this article, I believe you have some understanding of "example Analysis of the principle and function of JavaScript closure". If you want to know more about it, please follow the industry information channel. Thank you for your reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.