Original source: http://www.dnew.cn/post/196.htm
Let's look at some of the following
1.function f (x) {return x*x;}; f (x);
2. (function (x) {return x*x;}) (x);
3. (function (x) {return x*x;} (x));
The first one we should all be very familiar with, this is the way we often use the wording. The second third is the writing of anonymous functions.
--------------------------------------------------------------------------------
Second Kind
You can understand this:
var f=function (x) {return x*x;}; F ()
So we're not going to use the F variable to refer to the function.
function () {} ()
But it's definitely wrong, like,
var f=1+2;
f=f*0;
And
var f=1+2*0;
The results are different.
To get the correct result only:
f= (1+2) *0;
That is, to explicitly identify the program block, namely:
(function () {}) ()
Ken, you have a question: does bracket "()" actually play a role in identifying blocks of code?
We can use JavaScript's built-in function to detect!
Let me give you one of the simplest examples:
Alert (4)
This code will pop up with the message "4."
Change it.
(alert) (4)
You can see the effect of the execution being the same as the previous piece of code.
This form of function execution is also used by many JavaScript frameworks.
--------------------------------------------------------------------------------
Third, if you have used the JSVM framework, you will find that the code in it uses this form.
So how do you explain the third?
To figure out how the browser understands this, we can take advantage of the error console features of Mozilla Firefox.
Insert an error code in your code with the following snippet:
(function (s) {s+s} (1)). Splice ();
To open Mozilla Firefox's error console, you can see the following error prompts
Error: (function (s) {}) (1) has no properties
Source file: file:///C:/Documents.......html
Line: 18
You can think of a browser for
(function (s) {s+s} (1))
Such code follows the
(function (s) {s+s}) (1)
To parse.
--------------------------------------------------------------------------------
You may have the same understanding here:
function f (x) {return x*x;}; f (x); = = (function (x) {return x*x;}) (x); = = (function (x) {return x*x;} (x));
But they still have a difference.
First of all, for the second and third forms, other functions and codes are not likely to invoke the defined function, and there is a way to say that a function like this is called an anonymous function or a direct amount of a function.
Second, the second and third forms of the function, the intermediate variables do not contaminate the global namespace, you can see the middle of the code as a purely child procedure call.
Of course, you can easily implement closures using the following two forms of function definitions.
Look at an example:
/*
Http://jibbering.com/faq/faq_notes/closures.html (dnew.cn Note)
A Global Variable-getimginpositioneddivhtml-is declared and
Assigned the value of a inner function expression returned from
A one-time call to a outer function expression.
That inner function returns a string of HTML this represents an
Absolutely positioned DIV wrapped round an IMG element, such
All of the variable attribute values are provided as parameters
to the function call:-
*/
var getimginpositioneddivhtml = (function () {
/* The-buffar-array is assigned to a local variable of the
outer function expression. It is only created once and that one
Instance of the array is available to the inner function
It can be used in each execution of that inner function.
Empty strings are used as placeholders for the date of
be inserted to the Array by the inner function:-
*/
var Buffar = [
' <div id= ',
",//index 1, DIV ID attribute
' "style=" position:absolute;top: ',
',//index 3, DIV top position
' Px;left: ',
',//index 5, DIV left position
' Px;width: ',
",//index 7, DIV width
' Px;height: ',
",//index 9, DIV height
' px;overflow:hidden;\ ' ><img src=\ ',
",//index, IMG URL
' Width=\ ',
",//index, IMG width
' Height=\ ',
",//index, IMG height
' Alt=\ ',
",//index, IMG alt text
' ><\/div> '
];
/* Return the Inner function object, the result of the
Evaluation of a function expression. It is this inner function
Object that'll be executed on each call to-
Getimginpositioneddivhtml (...)-:-
*/
Return (function (URL, id, width, height, top, left, AltText) {
* * Assign The various parameters to the corresponding
Locations in the buffer array:-
*/
BUFFAR[1] = ID;
BUFFAR[3] = top;
BUFFAR[5] = left;
BUFFAR[13] = (buffar[7] = width);
BUFFAR[15] = (buffar[9] = height);
BUFFAR[11] = URL;
BUFFAR[17] = AltText;
/* Return the string created by joining each element in the
Array using an empty string (which is the same as just
Joining the elements together):-
*/
Return Buffar.join (");
}); : End of inner function expression.
})();
/* ^^-: The inline execution of the outer function expression. */
