Let's start with an example:

var img = document.getElementsByTagName('img');
        for(var i = 0; i< img.length; i++){

            img[i].onmouseover = function(){
            img[i].style.width = 185 +'px';
            img[i].style.height = 215 +'px';
        }

            img[i].onmouseout = function(){
            img[i].style.width = 165 +'px';
            img[i].style.height = 200 +'px';
        }
    }

The event handled by the above function is that when the mouse hovers over an image, the image becomes larger accordingly, and when the mouse moves out, the original size is restored. The first thing we can think of is to get all the image labels and then go through a loop to bind a suspended event for each image. There seems to be no problem, but there are many loopholes when it is really implemented.
The for loop just iterates through all the pictures, and there is no real event binding for the pictures.
And what we need to do is to bind events for all the pictures.
Functional expressions that can be called immediately can be used.
Use

        var img = document.getElementsByTagName('img');

        for(var i = 0; i< img.length; i++){

            (function(value){

            img[value].onmouseover = function(){

            img[value].style.width = 185 +'px';
            img[value].style.height = 215 +'px';
        }

            img[value].onmouseout = function(){

            img[value].style.width = 165 +'px';
            img[value].style.height = 200 +'px';
        }
        })(i);
    }

Wrapping the code in the for loop with an immediate call function is equivalent to calling the function once for each execution and passing i to value so that events can be bound to each image.

After understanding some basic concepts of functions, look back at {function(){ }) () and (function() { } (2) These two ways of writing immediate execution functions. At first, I thought it was a bracket wrapping anonymous functions and then adding brackets to call functions immediately. At that time, I did not know why to add brackets. Later, it became clear that if brackets were to be used immediately after the body of functions, the function must be a function expression, not a function. Several statements.

So the above functions can also be written in the form of function expressions as follows:

var a = function(value){

//code

}(i);
//That's equivalent to
var a = function(value){

//code

}
//Immediate call

a(i);
//In each for loop, perform an event binding

This is called immediately, that is, when traversing each i, I is passed in and bound to the picture. If you don't bind events to each image in this way, using the for loop is equivalent to walking a process, and the process is completed at one time without actual action.

The function of calling the function immediately:
The concept of private scope is not used in javascript. If you declare some variables in global or local scope in a multi-person development project, you may be overwritten by others with variables of the same name. According to the characteristics of the scope chain of JavaScript functions, you can use this technology to imitate a private operation. With domain, anonymous function is used as a "container", "container" can access external variables, while the external environment can not access "container" internal variables, so (function(){ }) () Internally defined variables do not conflict with external variables, commonly known as "anonymous wrappers" or "namespaces".

Here are a dozen examples:

Copy code:

1. function(a){
        console.log(a);   //Uncaught SyntaxError: Unexpected token(
}(12);


2. (function(a){
    console.log(a);   //firebug output 123, using the () operator
})(123);

3. (function(a){
    console.log(a);   //firebug output 1234, using the () operator
}(1234));

4. !function(a){
    console.log(a);   //firebug output 12345, use! operator
}(12345);

5. +function(a){
    console.log(a);   //firebug output 123456, using the + operator
}(123456);

6. -function(a){
    console.log(a);   //firebug output 1234567, using the - Operator
}(1234567);

7. var fn=function(a){
    console.log(a);   //firebug output 12345678, using the = operator
}(12345678)           
//It should be noted that:It's just an assignment statement.,Namely, the function is anonymous.function(a){...}()The return value of thefn,If the function does not return a value,thatfnbyundefined,


//Here are two examples to answer readers'questions:

8. var fn=function(a){
    console.log(a);   //firebug output 12345678, using the = operator
}(12345678);
console.info(fn);//The console is displayed as undefined;
fn(123);//Function undefined error, fn is undefiend 

9. var fn=function(a){
    console.log(a);   //firebug output 12345678, using the = operator
    return 111;
}(12345678);
console.info(fn);//You will find that fn is a return value 111, not a function.
fn(123);     //Error reporting, because fn is not a function

You can see the output, add it before function! ,+, - and even commas can be used to execute functions immediately after they are defined, while (), ()! Operators such as,+, -, = transform function declaration into function expression, eliminating the ambiguity between function expression and function declaration recognized by the javascript engine, telling the javascript engine that this is a function expression, not a function declaration, which can be parenthesed later and immediately execute the code of the function.

Bracketing is the safest way to do it, because! Operators such as,+, - and so on also operate with the return value of the function, sometimes causing unnecessary trouble.