Home > Developer > Web Develop
Two typical methods of closure in javascript: javascript2
There are a lot of introductions on the Internet. I have read a lot and I am still confused. I will not describe the theory here. I will give two examples directly.
Code 1: record the number of times a function is called
function a(){var i = 0;function b(){return ++i;}return b;}var c = a();c();//1c();//2
This method is similar to the private static variable in C language. It can keep the memory of local variables from being released.
Code 2: correctly register the event handler for the DOM
<Body> <input type = "button" id = "b1" value = "1"> <input type = "button" id = "b2" value = "2"> <input type = "button" id = "b3" value = "3"> <input type = "button" id = "b4" value = "4"> <script type =" text/javascript "> var buttons = document. getElementsByTagName ("input"); for (var I = 0; I <buttons. length; I ++) {// Method 1: The value of I is always 3 // buttons [I]. onclick = function () {// console. log (I + "was clicked. "); //} // Method 2: from 0 to 3, which is the function (I) {buttons [I]. onclick = function () {console. log (I + "was clicked. ") ;}}) (I) ;}</script> </body>
1. What is a closure?
JavaScript example:
Function GISMapPanel (){
This. mapPanel = document. getElementById ("mapDiv ");
This. width;
This. height;
This. showMap = function (){
Alert (this. mapPanel); // tip: [object]
This. mapPanel. onmousedown = this. mouseDownEventProcess ();
}
This. mouseDownEventProcess = function (){
Var _ this = this;
Return function (){
Alert (this. mapPanel); // tip: undefined, why;
_This. width = 400;
_ This. height = 300;
// Other codes
}
}
}
The simple explanation of the closure is that ECMAScript allows inner functions (nested functions): functions can be defined in another function. These internal functions can access the local variables, parameters, and other internal functions of the outer function (parent function. When an internal function is constructed and can be obtained outside the function (the function is treated as the return value), this internal function is executed after the outer function returns (outside the outer function ), that closure is formed.
Closure features: A. As A reference to A function variable, when A function is returned, it is in the active state. B. When A function is returned, A closure, A stack zone without resources released.
2. Closure metaphor
Function is like a house (also a house) in a house. It can be rented to a, and a is the owner of the function. It can also be rented to B, party B becomes the owner of the function Room (this). Party A takes everything from Party A and Party B does not use anything of Party. If Party A is the owner of the house (outer function) and rents a function of a certain room to Party B, Party B has everything in the room, B can also use a's bathroom and living room (the outer function variable, such as _ this ). The closure variable is the internal variable of the Outer House, including the function, toilet, and living room ). Similar to the JavaScript closure, the room can be one, two, and multiple bureaus. Of course, the first round is generally better for rent, and the JavaScript closure is generally one.
3. Closure
The success and popularity of object-oriented programming make it possible for languages that do not support object-oriented programming to lean in this direction. For example, the C language can simulate object-oriented programming through struct and function pointers, in order to achieve object-oriented encapsulation and polymorphism, JavaScript achieves encapsulation through object-based compilation. As shown in the preceding example, the event processing code, related attributes, and related methods related to the map (div) are concentrated in the GISMapPanel object. However, because the entity where the event occurs is the div object corresponding to the map, the house is occupied by the div object when the event function is called, that is, this is the div element, so alert (this. mapPanel); // tip: undefined. The div element has no mapPanel attribute. If you want to access the attributes in the original GISMapPanel object, you need to treat the GISMapPanel object as a living room, as shown in the example, so that you can ...... remaining full text>
What is the closure in JavaScript?
1. What is a closure?
JavaScript example:
Function GISMapPanel (){
This. mapPanel = document. getElementById ("mapDiv ");
This. width;
This. height;
This. showMap = function (){
Alert (this. mapPanel); // tip: [object]
This. mapPanel. onmousedown = this. mouseDownEventProcess ();
}
This. mouseDownEventProcess = function (){
Var _ this = this;
Return function (){
Alert (this. mapPanel); // tip: undefined, why;
_This. width = 400;
_ This. height = 300;
// Other codes
}
}
}
The simple explanation of the closure is that ECMAScript allows inner functions (nested functions): functions can be defined in another function. These internal functions can access the local variables, parameters, and other internal functions of the outer function (parent function. When an internal function is constructed and can be obtained outside the function (the function is treated as the return value), this internal function is executed after the outer function returns (outside the outer function ), that closure is formed.
Closure features: A. As A reference to A function variable, when A function is returned, it is in the active state. B. When A function is returned, A closure, A stack zone without resources released.
2. Closure metaphor
Function is like a house (also a house) in a house. It can be rented to a, and a is the owner of the function. It can also be rented to B, party B becomes the owner of the function Room (this). Party A takes everything from Party A and Party B does not use anything of Party. If Party A is the owner of the house (outer function) and rents a function of a certain room to Party B, Party B has everything in the room, B can also use a's bathroom and living room (the outer function variable, such as _ this ). The closure variable is the internal variable of the Outer House, including the function, toilet, and living room ). Similar to the JavaScript closure, the room can be one, two, and multiple bureaus. Of course, the first round is generally better for rent, and the JavaScript closure is generally one.
3. Closure
The success and popularity of object-oriented programming make it possible for languages that do not support object-oriented programming to lean in this direction. For example, the C language can simulate object-oriented programming through struct and function pointers, in order to achieve object-oriented encapsulation and polymorphism, JavaScript achieves encapsulation through object-based compilation. As shown in the preceding example, the event processing code, related attributes, and related methods related to the map (div) are concentrated in the GISMapPanel object. However, because the entity where the event occurs is the div object corresponding to the map, the house is occupied by the div object when the event function is called, that is, this is the div element, so alert (this. mapPanel); // tip: undefined. The div element has no mapPanel attribute. If you want to access the attributes in the original GISMapPanel object, you need to treat the GISMapPanel object as a living room, as shown in the example, so that you can ...... remaining full text>
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
