Home > Developer > JavaScript
Closures, and I've heard of it when I first touched JavaScript. The first thing to be clear about is that it's not really complicated to understand, and it's very useful. So what's the basis for us to understand the closures? I personally think that the most important is the scope (lexical scope), if the scope and scope of the chain do not understand the best students to learn first, and then back to understand the closure, it is more relaxed.
Below you will get to the topic directly.
We know that a function is scoped, and local variables defined inside the function are accessible only within the function. Once the function access is destroyed, the local variable is destroyed, and the local variable cannot be accessed in any way, except for the closure. That is, we can access variables inside the function from outside the function by means of closures, even if that function has been destroyed. Yes, the most important usage of closures is that we only provide certain interfaces to access and modify local variables, while the outside is not directly accessible to local variables.
Having said so much about how to use closures, let's see what the closures look like. Again to raise a chestnut link, is still the simplest people and name.
varPeople =function(){ varName = "Yika"; varSayname =function(){ returnName//a local variable that accesses the People function name } varSetName =function(newName) {name= NewName;//a local variable that accesses the People function name } return{sayname:sayname, setname:setname}//returns an object } varP1 = people ();//The function return is an object in which there are two functions Sayname and SetNameConsole.log (P1.name);//undefined. Name is a local variable in the people function, not a property of the P1 object, of course undefinedConsole.log (P1.sayname ());//"Yika"P1.setname ("Ruyi"); // Modify the value of the local variable name by the SetName function console.log (P1.sayname ());//"Ruyi"
After reading this example, we must have an understanding of how many closures, in addition to the contents of the comments, the following to do some additional.
Q: Why does the local variable Name property not be destroyed after the people is executed, but the value is also stored in memory.
A: In the example, the function comment is written specifically (the local variable name that accesses the people function). It is because the Sayname function and the SetName function in the People function access the Name property, and by return to the P1 object, it becomes the two methods of P1. Because the method always refers to the local variable of the people function, it will not be eliminated and will remain in memory. This creates a closure that allows you to access local variables inside the function outside of the function.
For this, we can change a more intuitive wording.
varPeople =function(){ varName = "Yika"; varobj ={sayname:function(){ returnname; }, SetName:function(newName) {name=NewName}}; returnObj//the intuitive return object }//The following results are the same.
Of course closures are not always so useful, especially in the loop. Continue to cite examples
<body> <input type= "button"/> <input type= "button"/> <input type= "button"/> <i Nput type= "button"/> <input type= "button"/> <input type= "button"/> <input type= "button"/> <script type= "Text/javascript" > var obtn = Document.getelementsbytagnam E (' input ' ); for (var i = 0, len = obtn.length; I < Len; I++ = function () {alert ( "value =" + i); // The place where the closure trap happened! Always output value = 7 </script></body> When we run the above code, we think, loop the button and output the number of the button, but we always get 7. In fact, with our previous talk of the closure will let the value of the variable has been stored in memory of the principle of thinking, you should understand. When we loop the button's Click event, it refers to the I variable in the for loop. When all the buttons are tied to the Click event, the value of I also becomes 7, of course all the buttons output is 7! How to solve this problem is also very good to do, but I hope to stay for everyone to think. Here's a general idea, we can create an auxiliary function outside of the loop and have the helper return a function that binds the current I.
Of course, I just introduced a brief introduction of the closure, I hope we can help everyone simple and easy to understand the closure.
Or that sentence oh, there is a problem immediately correct, I will immediately check the correction, so as not to mislead everyone!
javascript--understanding closures in a simple way
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
