Home > Developer > JavaScript
Today, I saw a javascript question, which cyclically binds events according to common sense, but the result is not what I wanted.
Copy codeThe Code is as follows:
<A href = "#"> text </a>
<Br>
<A href = "#"> link </a>
<Script>
Var as = document. getElementsByTagName ('A ');
For (var I = as. length; I --;){
As [I]. onclick = function (){
Alert (I );
Return false;
}
}
</Script>
1. The I displayed in the click link of this Code is-1. Why?
Simply put, it is the scope of function variables. If function () {alert (I); return false;} is treated as a function a (); a (), internal variable I is not defined, but it is used internally, so we look out and find the I defined in the for loop. Click the event to start execution after the for loop is complete. After the execution is complete, the I value has changed to-1; therefore, each pop-up is-1;
2. The for loop with two parameters is not common! Confused?
For (Statement 1, Statement 2, Statement 3 ){
// Todo
}
A. for Loop Conditions
Statement 1, Statement 2, and Statement 3 are optional.
B. Statement 2:
Usually Statement 2 is used to evaluate the conditions of the initial variable.
Statement 2 is also optional.
If Statement 2 returns true, the loop starts again. If false is returned, the loop ends.
Tip: If Statement 2 is omitted, the break must be provided in the loop. Otherwise, the loop cannot be stopped. This may cause the browser to crash.
C. About I -- judgment:
When I -- true/false is judged, I is first judged before I -- is computed. When I was in the last I -- judgment, I = 0 was actually judged, and I -- was executed again after the judgment, and the for loop was terminated, so the I value was changed to-1;
Var I = 1;
!! I --; // ture
Solution:
Copy codeThe Code is as follows:
Var as = document. getElementsByTagName ('A ');
For (var I = as. length; I --;){
(Function (I ){
As [I]. onclick = function (){
Alert (I );
Return false;
}
}) (I)
}
Or:
Copy codeThe Code is as follows:
Var as = document. getElementsByTagName ('A ');
For (var I = as. length; I --;){
Var a = function (I ){
As [I]. onclick = function (){
Alert (I );
Return false;
}
}
A (I );
}
Solution demo for other netizens 7:
Copy codeThe Code is as follows:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> closure demonstration </title>
<Script type = "text/javascript">
Function init (){
Var pAry = document. getElementsByTagName ("p ");
For (var I = 0; I <pAry. length; I ++ ){
PAry [I]. onclick = function (){
Alert (I );
}
}
}
</Script>
</Head>
<Body onload = "init ();">
<P> product 1 </p>
<P> product 2 </p>
<P> product 3 </p>
<P> product 4 </p>
<P> product 5 </p>
</Body>
</Html>
1. Save variable I to each paragraph object (p)
Copy codeThe Code is as follows:
Function init (){
Var pAry = document. getElementsByTagName ("p ");
For (var I = 0; I <pAry. length; I ++ ){
PAry [I]. I = I;
PAry [I]. onclick = function (){
Alert (this. I );
}
}
}
2. Save variable I in the anonymous function itself
Copy codeThe Code is as follows:
Function init2 (){
Var pAry = document. getElementsByTagName ("p ");
For (var I = 0; I <pAry. length; I ++ ){
(PAry [I]. onclick = function (){
Alert (arguments. callee. I );
}). I = I;
}
}
3. Add a closure, and I will pass it to the inner function as a function parameter.
Copy codeThe Code is as follows:
Function init3 (){
Var pAry = document. getElementsByTagName ("p ");
For (var I = 0; I <pAry. length; I ++ ){
(Function (arg ){
PAry [I]. onclick = function (){
Alert (arg );
};
}) (I); // call time Parameter
}
}
4. Add a closure, and I will pass it to the memory function as a local variable.
Copy codeThe Code is as follows:
Function init4 (){
Var pAry = document. getElementsByTagName ("p ");
For (var I = 0; I <pAry. length; I ++ ){
(Function (){
Var temp = I; // local variable during call
PAry [I]. onclick = function (){
Alert (temp );
}
})();
}
}
5. Add a closure to return a function as a response event (note the minor differences with 3)
Copy codeThe Code is as follows:
Function init5 (){
Var pAry = document. getElementsByTagName ("p ");
For (var I = 0; I <pAry. length; I ++ ){
PAry [I]. onclick = function (arg ){
Return function () {// return a function
Alert (arg );
}
} (I );
}
}
6. Implement the Function. In fact, every Function instance is generated will generate a closure.
Copy codeThe Code is as follows:
Function init6 (){
Var pAry = document. getElementsByTagName ("p ");
For (var I = 0; I <pAry. length; I ++ ){
PAry [I]. onclick = new Function ("alert (" + I + ");"); // new generates a Function instance at a time.
}
}
7. Use Function implementation. Note the differences with Function 6.
Copy codeThe Code is as follows:
Function init7 (){
Var pAry = document. getElementsByTagName ("p ");
For (var I = 0; I <pAry. length; I ++ ){
PAry [I]. onclick = Function ('alert ('+ I + ')')
}
}
Conclusion Complete. Click it!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
