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

This article mainly introduces "how to understand and master JavaScript closures". In daily operation, I believe many people have doubts about how to understand and master JavaScript closures. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to understand and master JavaScript closures". Next, please follow the editor to study!

Ali's answer:

When the function is nested in the function, the internal function can access the variables in the external function.

Function foo (x) {var tmp = 3; function bar (y) {alert (x + y + (+ + tmp));} bar (10);} foo (2)

No matter how many times it is executed, it will alert 16, because bar can access the parameter x of foo and the variable tmp of foo.

However, this is not a closure. When you return an internal function, it is a closure. The internal function close-over the variables of the external function until the end of the internal function.

Function foo (x) {var tmp = 3; return function (y) {alert (x + y + (+ + tmp));}} var bar = foo (2); / / bar is now a closure bar (10)

The above script will eventually alert 16, because although bar is not directly in the internal scope of foo, bar can still access x and tmp.

However, because tmp still has an internal closure with bar, it still increments itself by 1, and it increments 1 every time you call bar.

(considering the six-year-old limit: we can actually create more than one closure method, such as return their array, or we can set them as global variables. Instead of each having a copy, they all point to the same x and the same tmp.)

Note: now let's start with the seven-year-old content.

The x above is a literal value (value passing). Like other literal values in JS, when foo is called, the value of argument x is copied, and the copied copy is used as the parameter x of foo.

So the problem is that reference passing is used when dealing with object in JS, so the closure that passes an object,foo function return when you call foo will also refer to the original object!

Function foo (x) {var tmp = 3; return function (y) {alert (x + y + tmp); x.memb = x.memb? X.memb + 1: 1; alert (x.memb);}} var age = new Number (2); var bar = foo (age); / / bar is now a closure bar (10) that references age

Not surprisingly, every time we run bar (10), x.memb increments itself by 1. But it should be noted that x points to the same object variable, age, every time, and after running bar (10) twice, age.memb becomes 2. 0.

This has something to do with the memory leak in the HTML object, er, but it seems to be beyond the scope of the answer.

JohnMerlino said to Ali:

Here is an example of a closure without the return keyword:

Function closureExample (obj, text, timedelay) {setTimeout (function () {document.getElementById (objID) [xss_clean] = text;}, timedelay);} closureExample ('myDiv',' Closure is created', 500)

At 1:37 at night, John Pick replied:

Function in JS can access their:

1. Parameters.

two。 Local variable or function

3. External variables (environment variables?), including

3.1 Global variables, including DOM

3.2 variables or functions of external functions.

If a function accesses its external variables, it is a closure.

Note that external functions are not required. By accessing external variables, a closure can keep alive these variables. In the case of internal and external functions, external functions can create local variables and eventually exit; however, if any one or more internal functions do not exit after it exits, then the internal function maintains the local data of the external function.

A typical example is the use of global variables.

Mykhal replied:

The Wikipedia definition of closures is as follows:

In computer science, a closure is a function together with a referencing environment for the nonlocal names (free variables) of that function.

Technically, in JS, every function is a closure because it always has access to data defined outside it.

Since scope-defining construction in Javascript is a function, not a code block like in many other languages, what we usually mean by closure in Javascript is a fuction working with nonlocal variables defined in already executed surrounding function.

Closures are often used to create functions that contain hidden data (but not always).

Var db = (function () {/ / create a hidden object that holds some data / / the var data of the object is inaccessible from the outside) = {} / / create a function that provides some methods return function (key, val) {if (val = undefined) {return data [key]} / / get else {return data [key] = val} / / set} / / We can call this anonymous method / / return this internal function, which is a closure} () Db ('x'); / / return undefined db ('xclosure, 1); / / set data [' x'] to 1 db ('x'); / / return 1 / / it is impossible for us to access the data object itself / / but we can set its members here, and the study on "how to understand and master JavaScript closures" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.