1. Anonymous functions
Functions are the most flexible object in JavaScript. Here we just explain the purpose of its anonymous functions. Anonymous functions: they are functions without function names.
1.1 Definition of a function. First, let’s briefly introduce the definition of a function. It can be roughly divided into three ways.
The first one: This is also the most common one
The code copy is as follows:
function double(x){
return 2 * x;
}
The second method: This method uses the Function constructor, which uses both the parameter list and the function body as strings, which is very inconvenient and is not recommended.
The code copy is as follows:
var double = new Function('x', 'return 2 * x;');
The third type:
var double = function(x) { return 2* x; }
Note that the function on the right of "=" is an anonymous function. After creating the function, the function is assigned to the variable square.
1.2 Creation of anonymous functions
The first method: define the square function mentioned above, which is also one of the most commonly used methods.
The second method:
The code copy is as follows:
(function(x, y){
alert(x + y);
})(twenty three);
Here an anonymous function is created (in the first bracket), and the second bracket is used to call the anonymous function and pass in the parameters.
2. Closure
The English word for closure is closure, which is a very important part of JavaScript, because using closures can greatly reduce the amount of our code, make our code look clearer, etc. In short, the functions are very powerful.
The meaning of closure: To put it bluntly, closures are nesting functions. The inner function can use all variables of the outer function, even if the outer function has been executed (this involves the JavaScript scope chain).
Example 1
The code copy is as follows:
function checkClosure(){
var str = 'rain-man';
setTimeout(
function(){ alert(str); } //This is an anonymous function
, 2000);
}
checkClosure();
This example looks very simple. After careful analysis of its execution process, there are still many knowledge points: the execution of the checkClosure function is instantaneous (maybe it took only 0.00001 milliseconds), a variable str is created in the body of the checkClosure function. After the checkClosure is executed, str is not released. This is because the anonymous function in setTimeout has a reference to str. The str is released only after 2 seconds.
Example 2, Optimize the code
The code copy is as follows:
function forTimeout(x, y){
alert(x + y);
}
function delay(x , y , time){
setTimeout('forTimeout(' + x + ',' + y + ')' , time);
}
/**
* The above delay function is very difficult to read and is not easy to write, but if you use closures, the code can be clearer
* function delay(x , y , time){
* setTimeout(
* function(){
* forTimeout(x, y)
* }
* , time);
* }
*/
3. Give an example
The biggest use of anonymous functions is to create closures (one of the features of the JavaScript language), and also to build namespaces to reduce the use of global variables.
Example 3:
The code copy is as follows:
var oEvent = {};
(function(){
var addEvent = function(){ /*The implementation of the code is omitted */ };
function removeEvent(){}
oEvent.addEvent = addEvent;
oEvent.removeEvent = removeEvent;
})();
In this code, the functions addEvent and removeEvent are both local variables, but we can use it through the global variable oEvent, which greatly reduces the use of global variables and enhances the security of the web page. We want to use this code: oEvent.addEvent(document.getElementById('box') , 'click' , function(){});
Example 4:
The code copy is as follows:
var rainman = (function(x, y){
return x + y;
})(twenty three);
/**
* It can also be written in the following form, because the first bracket only helps us read, but the following writing format is not recommended.
* var rainman = function(x, y){
* return x + y;
* }(twenty three);
*/
Here we create a variable rainman and initialize it to 5 by calling the anonymous function directly. This trick is sometimes very practical.
Example 5:
The code copy is as follows:
var outer = null;
(function(){
var one = 1;
function inner (){
one += 1;
alert(one);
}
outer = inner;
})();
outer(); //2
outer(); //3
outer(); //4
The variable one in this code is a local variable (because it is defined within a function), so the external is inaccessible. But here we create an inner function, which can access the variable one; and also reference the global variable outer to inner, so three calls to outer will pop up the incremental result.
4. Pay attention
4.1 The closure allows inner-layer functions to refer to variables in parent functions, but the variable is the final value
Example 6:
The code copy is as follows:
/**
* <body>
* <ul>
* <li>one</li>
* <li>two</li>
* <li>three</li>
* <li>one</li>
* </ul>
*/
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
lists[ i ].onmouseover = function(){
alert(i);
};
}
You will find that when the mouse moves through each <li&rt; element, it always pops up 4 instead of the element subscript we expect. Why is this? The precautions have been discussed (final value). Obviously this explanation is too simple. When the mouseover event calls the listening function, first look for whether i is defined inside the anonymous function ( function(){ alert(i); }), and the result is that it is not defined; therefore it will look upwards, and the search result is that it has been defined, and the value of i is 4 (the value of i after the loop); so, in the end, each pop-up is 4.
Solution 1:
The code copy is as follows:
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
(function(index){
lists[ index ].onmouseover = function(){
alert(index);
};
})(i);
}
Solution 2:
The code copy is as follows:
var lists = document.getElementsByTagName('li');
for(var i = 0, len = lists.length; i < len; i++){
lists[ i ].$$index = i; //Record the index by binding the $$index attribute on the Dom element
lists[ i ].onmouseover = function(){
alert(this.$$index);
};
}
Solution three:
The code copy is as follows:
function eventListener(list, index){
list.onmouseover = function(){
alert(index);
};
}
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
eventListener(lists[ i ] , i);
}
4.2 Memory leak
Using closures is very easy to cause the browser's memory leakage. In severe cases, the browser will be dead. If you are interested, please refer to: http://www.VeVB.COM/article/57404.htm