JS Note Notes (11)--Browse Uncle Tom's Blog's study notes part1

1. Preface

These two days looked at Uncle Tom's "in-depth understanding JS series" In the basic part, according to their actual situation, did a reading notes, recorded part of the problem is easy to stumbling. Write an article for everyone to share.

2. About Htmlcollection "real-time query"

var divs = document.getElementsByTagName ("div"),      i;  for (i = 0; i < divs.length; i++) {      //...}

Performance issues can occur in the above code. The problem is that DIVs is an object of the htmlcollection type that, when it gets the data, will re-parse the calculation from the DOM. Therefore, in the For loop here, each step of the loop performs a divs.length calculation, which will cause the browser to iterate through the DOM tree again.
Therefore, the length property value of divs should be calculated early outside of the loop. As follows:

var divs = document.getElementsByTagName ("div"),    i,    = divs.length;  for (i = 0; i < length; i++) {    //...}

3. For: In ... , note hasownproperty validation

var obj = {                ten                            };                         // Note the phrase code             - ;             var item;              for inch obj) {                Console.log (item);            }

In the above code, pay attention to the middle label comment sentence. This code is added with no addition, will be on the following for: In.. The loop has an impact. Add the Output "C", do not add the output "C". The reason is simple, for. In.. Loops can not only traverse the properties of the Obj object itself, but also traverse the properties in the obj prototype.

To block out the properties in the prototype, use the hasOwnProperty function, as follows:

            for inch obj) {                if  (Obj.hasownproperty (item)) {                //if ( Object.prototype.hasOwnProperty.call (obj, item)) {                    console.log (item);                }            }

These two if judgment statements, all can be used, the effect is the same. The first code is good readability and the second is relatively efficient. Suggestion, no special case, with the first can.

4. Old problem: closure problem of generating function/event in loop

var events = [],                = 0;         // Looping create function         for (; i <; i++) {            function  () {                console.log (i);            };        }         // Validation Results         for (i = 0; i < events.length; i++) {            events[0] ();        }

First look at the above code, have JS development experience of people are certainly familiar, but some people know, some people do not know. According to the above code, loop through the events array and execute the functions in the array elements, what number will the 10 functions print? The answer is: All will output "10". Let's explain why:

When each function is generated/created, the system assigns it a variable environment, which also includes the data of the closure. However, when multiple environments are common with a closed packet of data, it is a reference to the relationship, which is the focus. References, not duplicates. If this common data is changed, these common environments are acquired, and the data is changed.

Therefore, when the first function is created, i = = 0, the first function refers to the closure of the value of I is 0, the second function is created, i = = 1, which is, the first, the second two functions applied in the closure of the value of I, are 1. And so on, until the tenth function is created, i = = 9; But in the last step of the For loop, i++ is executed; so i = = 10.

Do you understand?

To change the problem, if you want each function to output a different value, you need to not let each function have a closure--let each function use a separate closure data, not shared. Just say the part of the For loop creation function is modified to:

// Looping create function         for (; i <; i++) {            = (function  (index) {                returnfunction (index) {                    console.log (index);                }            }) (i);        }

At this point, I, as a parameter, passes in the anonymous auto-execute function and assigns the value to the index parameter. The variable environment of this anonymous function preserves index and does not change as I changes. That's the point.

JS Note Notes (11)--Browse Uncle Tom's Blog's study notes part1