<! DOCTYPE html>
Method One:
/* Workaround: Add a number of corresponding closure domain spaces (in this case, anonymous functions), specifically to store the original reference (subscript), but only for the basic type (basic type value pass, object type reference pass) */for (var i = 0;i<arr.length;i++) { //declares an anonymous function, which is passed as a value if it comes in the base type, so there is no effect on the argument, //The function object has a local private variable arg ( parameters), the function scope's closure object property has two references, one is arr, one is I //Although the value of reference I changes externally, but the local private variable (parameter) arg is not affected, and its value is determined at the beginning of the call. ( function (arg) {Arr[i].onclick = function () { //onclick functions instance of closure object property has a reference AR G, alert (ARG); //As long as the external space of ARG is not changed, the reference value here will of course not change}) (i); //Execute the anonymous function immediately, passing subscript I (argument)}
Method Two:
/* Workaround: add Subscript As Object property (name: "I", value:i value) to each array item (P object) */for (var i = 0;i<arr.length;i++) { //for current array item i.e. current p object to add a property named I, the value is the value of the I variable of the loop body, //At this time the I property of the current P object is not a reference to the I variable of the loop body, but rather a property of a standalone P object, the value of the property is determined at the time of declaration When a base type variable declares that it is equal to another base variable, it is not at this point that two basic type variables point to a value, but each have their own values, but the values are equal) arr[i].i = i; Arr[i].onclick = function () { alert (this.i); }}
Method Three:
/* Solution: A bit similar to the solution, but a little bit less similar. Similarities: The same is the addition of several corresponding closure domain spaces to store subscript differences: The workaround is to complete the binding of the event within the new anonymous closure space, and this example is the function in the function that binds the event to the functions returned by the new anonymous function The reference to the closure object in scope Arg is a private variable that points to the anonymous function it returns, Arg */for (var i = 0; i<arr.length;i++) { Arr[i].onclick = (function (a RG) { return function () { alert (arg); } }) (i);}
Method 4:
/* Solve ideas and solutions one the same */for (var i = 0; i<arr.length;i++) { (function () { var temp = i; Arr[i].onclick = function () { alert (temp); } }) ();}
Method 5:
/* Solution ideas and solutions three and four identical */for (var i = 0;i<arr.length;i++) { Arr[i].onclick = (function () { var temp = i; return function () { alert (temp); } }) ();}
Method 6:
/* Workaround: Add the subscript as the property of the binding function */for (var i = 0;i<arr.length;i++) { (Arr[i].onclick = function () { alert ( ARGUMENTS.CALLEE.I); Arguments Parameter object arguments.callee parameter object belongs to function }). i = i;}
Method 7:
/* Workaround: Create a function instance implementation by using the constructor of function, because the contents of the passed-in body are strings, so function gets a copy of the string without the reference to I (this is the first to get i.tostring () Then the string is stitched into a new string, and the Function parses it backwards into the JS code) */for (var i = 0;i<arr.length;i++) { Arr[i].onclick = new Function (" Alert ("+i+"); /each new function gets a function object (one) with its own closure field}
Method 8:
/* Workaround: return a function directly through function differs from solution seven in that: solution seven uses new, and new is used, when the function is used as a constructor to construct a function Instance returns The current workaround does not use new, the function function is treated as a function, and the incoming parameter returns a new function; In fact, the new and not new is only the difference between: the use of the new function functions as a constructor, the JS parser to produce a new object, in the constructor of this point to the new object; Not practical new is the function function, which is returned by producing an instance from within the function itself. */for (var i = 0;i<arr.length;i++) { Arr[i].onclick = Function ("Alert (" +i+ ");");}
Method 9:
<script type= "Application/javascript" > " use Strict";//using strict mode, otherwise error syntaxerror:block-scoped declarations ( Let, const, function, Class) is not yet supported outside strict mode var arr = document.getelementsbytagname ("P"); for (var i = 0;i<arr.length;i++) {let j = i;//creates a block-level variable arr[i].onclick = function () { alert (j); } } </script>
Original: 1190000003818163?_ea=385256#articleheader0
JavaScript solves the problem of I values in the For Loop (reprinted)