JavaScript closure learning notes

JavaScript closure learning notes
Closure is a difficult and characteristic of JavaScript language. Many advanced applications rely on closures for implementation. The following are my study notes, which are useful for beginners of JavaScript. 1. To understand the scope of variables, you must first understand the special scope of variables in JavaScript. Variables have two scopes: global variables and local variables. The special feature of JavaScript is that the function can directly read global variables. 1 var n = 999; 2 3 function f1 () {4 alert (n); 5} 6 7 f1 (); // 999 on the other hand, local variables in a function cannot be read outside the function. 1 function f1 () {2 var n = 999; 3} 4 5 alert (n); // error note that when a function declares a variable, be sure to use the var command. If you don't need it, you actually declare a global variable! 1 function f1 () {2 n = 999; 3} 4 5 f1 (); 6 7 alert (n); // 999 2. How to read local variables from the outside? For various reasons, we sometimes need to get local variables in the function. However, as we have already said, under normal circumstances, this cannot be done. It can only be implemented through a work und. That is to define another function within the function. 1 function f1 () {2 var n = 999; 3 function f2 () {4 alert (n); // 9995} 6} in the code above, function f2 is included in function f1. All local variables in f1 are visible to f2. But in turn, the local variables in f2 are invisible to f1. This is the unique "chain scope" structure (chain scope) of JavaScript language. The sub-object will first look up the variables of all parent objects. Therefore, all variables of the parent object are visible to the child object, and vice versa. Since f2 can read local variables in f1, As long as f2 is taken as the return value, we can't read its internal variables outside f1! 01 function f1 () {02 03 var n = 999; 04 05 function f2 () {06 alert (n); 07} 08 09 return f2; 10 11} 12 13 var result = f1 (); 14 15 result (); // 999 3. The concept of closure the f2 function in the previous code is the closure. Closure definitions in various professional documents are very abstract and hard to understand. In my understanding, closures are functions that can read internal variables of other functions. In JavaScript, only the subfunctions in a function can read local variables. Therefore, you can simply understand the closure as a function defined in a function ". Therefore, in essence, closure is a bridge connecting the internal and external functions of a function. 4. The purpose of the closure can be used in many places. It has two major functions: one is to read the internal variables of the function mentioned above, and the other is to keep the values of these variables in the memory. How can we understand this sentence? See the following code. 01 function f1 () {02 03 var n = 999; 04 05 nAdd = function () {06 n + = 107} 08 09 function f2 () {10 alert (n ); 11} 12 13 return f2; 14 15} 16 17 var result = f1 (); 18 19 result (); // 99920 21 nAdd (); 22 in this code, result is actually the f2 function of the closure. It runs twice in total. The first value is 999, and the second value is 1000. This proves that the local variable n in function f1 has been stored in the memory and is not automatically cleared after f1 is called. Why? The reason is that f1 is the parent function of f2, and f2 is assigned a global variable, which causes f2 to always be in the memory, while f2 depends on f1, therefore, f1 is always in the memory and will not be recycled by the garbage collection mechanism after the call is completed. Another noteworthy part of this code is "nAdd = function () {n + = 1}". The var keyword is not used before nAdd, therefore, nAdd is a global variable rather than a local variable. Secondly, the value of nAdd is an anonymous function, and this anonymous function itself is also a closure, so nAdd is equivalent to a setter, you can operate the local variables inside the function outside the function. 5. Note: 1) because the closure will make the variables in the function be saved in the memory, the memory consumption is very high, so the closure cannot be abused, otherwise, it may cause webpage performance problems and may cause memory leakage in IE. The solution is to delete all unused local variables before exiting the function. 2) The closure changes the value of the internal variable of the parent function outside the parent function. Therefore, if you use the parent function as an object, use the closure as its Public Method, and use internal variables as its private value ), be sure not to change the value of the internal variable of the parent function. 6. Thinking questions if you can understand the running results of the following two sections of code, you should understand the operating mechanism of the closure. Code snippet 1. 01 var name = "The Window"; 02 03 var object = {04 name: "My Object", 05 06 getNameFunc: function () {07 return function () {08 return this. name; 09}; 10 11} 12 13}; 14 15 alert (object. getNameFunc (); code snippet 2. 01 var name = "The Window"; 02 03 var object = {04 name: "My Object", 05 06 getNameFunc: function () {07 var that = this; 08 return function () {09 return that. name; 10}; 11 12} 13 14}; 15 16 alert (object. getNameFunc (); (end) one interview question: how to click alert's index for each column? 1 <ul id = "test"> 2 <li> This is the first </li> 3 <li> This is the second </li> 4 <li> This is the third </li>> 5 </ul> the reference code is as follows: 01 <script type = "text/javascript"> 02 window. onload = function () {03 var ul = document. getElementById ("test"); 04 var lis = ul. getElementsByTagName ('lil'); 05 for (var I = 0; I <lis. length; I ++) {06 lis [I]. onclick = (function (num) {07 return function () {// applied the closure 08 alert (num); 09} 10}) (I ); 11} 12} 13 </script> Note: 1 lis [I]. onclick = function () {2 alert (I); // always 33 };