Shulou(Shulou.com)05/31 Report--

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

Variable scope

Before we learn about closures, we first need to understand the variable scope of JavaScript, which is different from other languages. In JavaScript, there is no concept of local scope, but there is a global scope and a function scope. The global scope is the same as that of other languages, and there is nothing to pay attention to, while the function scope means that variables declared inside the function cannot be accessed directly outside the function.

Var a = 99position function F1 () {console.log (a);} F1 ()

In the above code, F1 can read the global variable a, while in the following code a cannot be accessed.

Function F1 () {var a = 99;} console.log (a)

How do I read variables declared inside a function from the outside?

In some cases, we may need to get the variables inside the function, which cannot be done normally, so we need to use a special method.

Function F1 () {var a = 99; function f2 () {console.log (a);}}

In the above code, we define another function f2 in function F1 so that all variables in F1 are visible to f2. Since f2 can read variables in F1, we just need to use f2 as the return value of F1. We can read its internal variables on the outside of F1.

Function F1 () {var a = 99; function f2 () {console.log (a);} return f2;} var result = F1 (); result ()

At this point, a simple closure is formed. Therefore, a closure can be simply understood as a function in a function, and in essence, a closure is a bridge between the inside and outside of a function.

Properties of closures

The closure causes all the variables in the function to be stored in memory. First, let's take a look at the following two examples

Function A () {var count = 0; function B () {count++; console.log (count);} return B;} var C = A (); C (); / / 1C (); / / 2C (); / / 3

Count is a variable in function A, whose value is changed in function B. every time function B executes, the value of count adds up to 1. Therefore, the count variable in function A will always be stored in memory.

Function A (x) {function B (y) {console.log (x);} return B;} var C = A (3); C (5); / / 8

When 3 is passed into the A function, the B function will remember this value, so when you pass 5 later, it will only assign a value to the y in the B function, so it will finally output 8.

Attention points for using closures

Because of the above characteristics of closures, each use of closures will greatly increase memory consumption, so closures should not be abused, otherwise it will affect the performance of web pages. We can also manually delete variables by pointing to null before the function exits. We can take a look at the next classic interview question to understand.

Function outer () {var num = 0; / / the internal variable return function add () {/ / returns the add function through return, you can access the num++; / / internal function with references outside the outer function and console.log (num) as part of the add function;};} var func1 = outer (); func1 (); / / actually calls the add function to output 1func1 () / / output 2 because the private scope inside the outer function will always be occupied var func2 = outer (); func2 (); / / output 1 each time the function is re-referenced, the closure is brand new. Func2 (); / / output 2 at this point, the study on "case analysis of the use of 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.