JavaScript solves the problem of I values in the For Loop (reprinted)

Source: Internet
Author: User

Html:

<! 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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.