Closures in JavaScript are really a cliché question. Recently, I have been asking about my own expression skills and I can't fully support them. I'm crazy. On the way back, I suddenly thought of a very simple thing. In fact, when we are doing projects, we often use closures, but when we ask questions, the answers are often the answers we often find. Alas, whether we are dealing with interviews or really wanting to learn something, I will share with you my own understanding, and writing is inevitable.
1.What is a closure?
The book of Red Bao says: "It refers to a function that has the right to access variables in another function scope."
Simply put, JavaScript allows the use of internal functions - that is, function definitions and function expressions are located in the function body of another function. Moreover, these internal functions can access all local variables, parameters, and other internal functions declared in the external function where they reside. When one of these internal functions is called outside the external function containing them, a closure is formed. In simple terms, it is "a function creates another function inside, and the latter function can read the variables in the function above, and the latter function can be called a 'closure'".
2. What is the use of closures?
Through my extensive review, if we say "by using closures, we can do a lot of things. For example, we simulate object-oriented code style; express the code more elegantly and concisely; and improve the execution efficiency of the code in some aspects", will it feel empty? Will these be better? Since there is no real block-level scope in JavaScript, but in order to declare some local variables that only the function can use, we will use closures, so that we can greatly reduce the variables in the global scope and purify the global scope.
Here are some examples:
1. Anonymous self-executing function
We know that if all variables are not added with the var keyword, the default will be added to the properties of the global object. There are many disadvantages to adding such temporary variables to the global object.
For example: other functions may misuse these variables; causing the global object to be too large and affecting the access speed (because the value of the variable needs to be traversed from the prototype chain).
In every time we use the variable, we use the var keyword. In actual situations, we often encounter a situation where some functions only need to be executed once, and their internal variables do not need to be maintained.
For example, in the initialization of the UI, we can use closures:
var data= { table : [], tree : {} }; (function(dm){ for(var i = 0; i < dm.table.rows; i++){ var row = dm.table.rows[i]; for(var j = 0; j < row.cells; i++){ drawCell(i, j); } } })(data);We create an anonymous function and execute it immediately. Since the external cannot refer to the variables inside it, the resource will be released immediately after the function is executed. The key is not to pollute the global object.
2. Result cache
We will encounter many situations in development. Imagine that we have a very time-consuming function object that takes a long time to process each call. Then we need to store the calculated value. When calling this function, we first look up in the cache. If it cannot be found, we will perform calculations, and then update the cache and return the value. If it is found, we can directly return the found value. Closures do exactly this because it does not release external references, so that the values inside the function can be preserved.
var CachedSearchBox = (function(){ var cache = {}, count = []; return { attachSearchBox : function(dsid){ if(dsid in cache){//If the result is in the cache return cache[dsid];//Return the object in the cache directly} var fsb = new uikit.webctrl.SearchBox(dsid);//New cache[dsid] = fsb;//Update cache if(count.length > 100){//Security cache size <=100 delete cache[count.shift()]; } return fsb; }, clearSearchBox: function(dsid){ if(dsid in cache){ cache[dsid].clearSelection(); } } } }; })(); CachedSearchBox.attachSearchBox("input");In this way, we will read the object from the cache on the second call.
3. Packaging
var person = function(){ //The scope of the variable is inside the function, and the var name cannot be accessed outside. var name = "default"; return { getName : function(){ return name; }, setName : function(newName){ name = newName; } } }(); print(person.name);//Access directly, the result is undefined print(person.getName()); person.setName("abruzzi"); print(person.getName());4. Implement classes and inheritance
function Person(){ var name = "default"; return { getName : function(){ return name; }, setName : function(newName){ name = newName; } } }; var p = new Person(); p.setName("Tom"); alert(p.getName()); var Jack = function(){}; //Inherited from Person Jack.prototype = new Person(); //Add private method Jack.prototype.Say = function(){ alert("Hello,my name is Jack"); }; var j = new Jack(); j.setName("Jack"); j.Say(); alert(j.getName());At the end of the writing, I don’t know that in the end, you all found that you have actually used a lot of this in the projects you have done. Anyway, I encountered it, and this is how closures exist.
Although it is cliché, it is still very important. As for the defects of closures, just say that if you are not abusing closures, it will lead to memory leakage. What is the memory leakage on Baidu?^_^.
The above brief analysis and interpretation of closures in JavaScript (must-read) is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.