Home > Web Front-end > JS Tutorial > JavaScript, jquery closure concept analysis_javascript skills

JavaScript, jquery closure concept analysis_javascript skills

WBOY
Release: 2016-05-16 18:24:52
Original
1054 people have browsed it

But I use JavaScript often, so I need to understand the concepts involved.
In fact, the concept of closure in JavaScript is very simple, that is, the function uses external variables and can be obtained without passing parameters.
For example:

Copy code The code is as follows:

<script> <br>var sMessage = "Hello world"; <br>function sayHello(){ <br>alert(sMessage); <br>} <br>sayHello(); <br>addNumber(1,2); <br> <br>var iBaseNum = 10; <br>function addNumber(iNum1, iNum2) { <br>function doAddition() { <br>alert(iNum1 iNum2 iBaseNum); <br>} <br>return doAddition(); <br>} <br>function a(){ <br>var i=0; <br>function b(){ <br>alert( i); <br>} <br>return b; <br>} <br>var c = a(); <br>c(); <br>c(); <br><br></script>

The first function sayHello is not passed Parameters directly use the sMessage variable, which is called a closure.
The second function is more complicated. There is a doAddition in it which is also a closure function. It does not require parameters and directly obtains iNum1, iNum2 and the external variable iBaseNum in the execution environment.
The third function can protect the access of the i variable, and always save i in the memory, and can continue to increase. (A classic use of closures)
The closure in jquery is similar, let’s give an example first

You may ask
Copy code The code is as follows:

(function($){
$("div p").click(function(){alert("cssrain!") });
})(jQuery); //A closure

How to write this?
Don’t worry, I also asked the upc for advice, and then I understood a little bit.
The $ here is just a formal parameter, but jquery is a global variable, so it will be executed automatically without calling the function, or it can be converted into a normal function in two steps. Write the function first and then call it.
As shown below
Actually:

Copy the code The code is as follows:
( function($){
$("div p").click(...);
})(jQuery);

is equal to

Copy code The code is as follows:
function tempFunction($){ //Create a function with $ as formal parameter
$("div p").click(....);
}
TempFunction(jQuery); //Pass in the actual parameters jQuery to execute the function.

Just do it directly Write it this way, forget it


Copy the code The code is as follows:
(function(cssrain ){
cssrain("div p").click(.... );
})(jQuery); //A closure


closure Basic writing method:
(function(){do someting})();
//You can understand this as defining an anonymous function and executing it immediately
With parameters, it is like this:
(function( Formal parameter){do someting})(actual parameter);
In addition
(function(){var upc="i am upc"})();
alert(upc);
Yes Prompt undefined.
Because after closure, the variables inside are equivalent to local.
Benefits of closure:
No additional global variables are added.
All variables during execution are inside the anonymous function.
The above example is not very good and is a bit confused with JavaScript closures, but it is indeed a closure in jquery. It's just processed by jquery.
If there is anything wrong, please discuss it with each other. I am also a beginner and there are still many things I don’t understand.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template