Closures are a difficulty in JavaScript and are also its feature. Many advanced applications of JavaScript rely on closures to implement them. The following is a record of my learning closures, I hope it will be helpful to you.
Variable scope
Before learning closures, we must first understand the variable scopes that JavaScript is different from other languages. In JavaScript, there is no concept of local scope, but there is global scope and function scope. The global scope is the same as in other languages, and there is no need to pay attention to it. Function scope means that variables declared inside the function cannot be directly accessed outside the function.
var a = 99;
function f1() {
(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;
}
(a);
How to read variables declared inside a function from outside?
In some cases, we may need to get variables inside the function, which cannot be done under normal circumstances, so we need to use a special method.
function f1() {
var a = 99;
function f2() {
(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 the variable in f1, we just need to use f2 as the return value of f1, and we can read the variable inside it outside f1.
function f1() {
var a = 99;
function f2() {
(a);
}
return f2;
}
var result = f1();
result();
At this time, a simple closure is formed. Therefore, closures can be simply understood as functions in functions, and essentially, closures are bridges connecting the internal and external functions.
Closure features
Closures will cause all variables in the function to be saved to memory. First, let's take a look at the following two examples
function A() {
var count = 0;
function B() {
count++;
(count);
}
return B;
}
var C = A();
C(); // 1
C(); // 2
C(); // 3
count is a variable in function A. Its value is changed in function B. Every time function B is executed, the value of count is accumulated by 1 on the original basis. Therefore, the count variable in function A will be kept in memory all the time.
function A(x) {
function B(y) {
(x+y);
}
return B;
}
var C = A(3);
C(5); //8
When 3 is passed into function A, function B will remember this value, so when 5 is passed into function B, it will only assign a value to y in function B, so 8 will be output in the end.
Notes on using closures
Due to the above-mentioned closure characteristics, each time you use the closure, it will increase the memory consumption a lot, so you cannot abuse the closure, otherwise it will affect the performance of the web page. We can also manually delete the variables by pointing to null before the function exits. We can look at the next classic interview question to understand.
function outer(){
var num = 0; //Internal variable return function add() { //Return the add function by returning, you can access it outside the outer function. num++; //The internal function has references as part of the add function (num);
};
}
var func1 = outer();
func1(); //In fact, it is calling the add function, output 1func1(); //Output 2 because the private scope inside the outer function will be occupied all the timevar func2 = outer();
func2(); // Output 1 Each time the function is re-referenced, the closure is brand new.func2(); // Output2
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.