Example 6:
Copy the codeThe code is as follows:
<script type="text/javascript">
= function(){
var i = 1;
function test(){
alert(i);
}
// A prompt box with content 1 pops up
test();
}
</script>
analyze:
Internal functions can access variables of external functions, which leads to a new concept, that is, closures.
Closure
What is a closure? Simply put, it is a function A. Its internal function B can access variables defined in A, even if function A has terminated. Let’s learn about it through examples below.
Example 7:
Copy the codeThe code is as follows:
<script type="text/javascript">
= function(){
var i = 1;
= function(){
alert(i);
}
}
</script>
analyze:
When the entire page is loaded, the onload event will be triggered. This onload event method registers a method for the onunload event in the window. This method uses the variable declared in the onload event method, and then the onload event method runs. At this time, we click to close the window, and a prompt box with content 1 will pop up, indicating that the onunload event method successfully calls the variable declared in the onload event method.
To further understand the characteristics of closures, see the following example
Example 8:
Copy the codeThe code is as follows:
<script type="text/javascript">
function initX(oarg){
// Define a variable
var x = oarg;
// Define a method to display variables
var funGet = function(){
alert(x);
}
// Define a method to modify variables
var funSet = function(iarg){
x = iarg;
}
// Return these two methods
return [funGet,funSet];
}
// Run a method instance with the return value as an array containing get and set methods
var funArr = initX(1);
// Get the get method
var funGet = funArr[0];
// Get the set method
var funSet = funArr[1];
// Run the get method to display the x variable in the initX method instance, and the result is 1
funGet();
// Run the set method to assign the x variables in the initX method instance
funSet(2);
// Run the get method to display the x variable in the initX method instance, and the result is 2
funGet();
</script>
analyze:
When an internal function calls a variable defined by an external function, it actually refers to the memory block of this variable, so when we call the internal function, the referenced variable value is the actual content of the current variable.
Although the closure function is powerful, if you are not careful, it will also cause trouble to us. Look at the example below.
Example 9:
Copy the codeThe code is as follows:
<button >run</button>
<script type="text/javascript">
(function(){
var obj = ("main");
var funArr = ['onclick','onkeypress'];
for(var i=0; i<; i++){
var temp = funArr[i];
obj[temp] = function(){
alert(temp);
}
}
})();
</script>
The original meaning of writing code is to register click events and key events for the button with id and main, and the content of the event is to pop up the event name prompt box. But the result is a bit incredible. The prompt boxes for the two events are all onkeypress. According to the principle of closure, we will find that when the two event methods are called, the temp variable points to the content of funArr[1]. We can modify it like this to solve this problem:
Copy the codeThe code is as follows:
<button >run</button>
<script type="text/javascript">
(function(){
var obj = ("main");
var funArr = ['onclick','onkeypress'];
for(var i=0; i<; i++){
(function(){
var temp = funArr[i];
obj[temp] = function(){
alert(temp);
}
})();
}
})();
</script>
Put the code in the for loop into a function, so that each loop will produce a function instance, allowing the function instance to record each value in the funArr array, thus avoiding the problems encountered above.
Previous page12Read the full text