JS Note Notes (9)--a few points of knowledge recorded when reading jquery source code

Recently has been using spare time to look at the jquery2.1.1 source code, about 2000 lines have seen. Usually look at the time, do some notes, posted out to share.

1. Array.prototype.slice.call can convert a pseudo-array into a true array

In fact, the so-called "pseudo-array" is the length property, and there are "0", "1", "2" and other properties of these objects, the following code:

var obj = {            0: "A",            1: "B",            2: "C",            3        };         var slice = [].slice;        Console.log (Slice.call (obj));

The result of printing here is a real array:

In addition, we usually write the $ (' div '), is actually this pseudo-array, you can look at:

One method of jquery source code is to determine whether it is a pseudo-array, which is determined by whether the object has a length property, and if the [Length-1] property of the object has no value. This will rule out a special type--string,string has the length property, but it is not a pseudo-array.

In the above code, Slice.call not only converts a pseudo-array into a real array, but also slice the elements like an array. As follows:

The results of the printing are conceivable:

2. The Window object also has a window property

In jquery source code, when judging whether an object is a window, use the following methods to determine:

return Obj.window = = = window;

Using the browser to monitor the details of the following window objects, you will find that there is indeed a Window object under the Window object, and it is an infinite loop structure.

3. Quick Method

First:

Second:

Cast an object to its corresponding bool type, available:!! Obj

Conversely, if you convert to the opposite bool type, you can:!obj

4. = = = and = =

= = = is strictly equal, no type conversions are made, and = = is not strictly equal, and type conversions are performed. In some JS books, developers are advised never to use = = or! =.

But in the jquery source, it is useful to "= =" or "! =" cases-when judging undefined and null.

5. Rewrite the toString ()

Some object types override the ToString method, so to get the name of the object, you cannot simply use the. ToString () instead of the Object.prototype.toString.call

var a = [1, 2];console.log (a.tostring ());    // Console.log (Object.prototype.toString.call (a));   // [Object Array]

6. Object (' str ')--string coercion type to object

After a string is coerced to a type of object, a standard pseudo-array object is returned.

Object (' abc ')--String {0: "A", 1: "B", 2: "C", Length:3}

7. The each function of jquery, the greatest advantage

The biggest improvement in each function compared to a for loop is that it encloses a separate function scope.

Look at the code for a For loop first:

             This );             var $divs = $ ("div"),                = 0,                = $divs. length;              for (; index < length; index++) {                this);                 var j = $;            }            Console.log (j);

The results are printed as follows:

The result can be seen: the statement block inside the For loop is the same as the outside scope, and the most frightening is the variable defined within the For loop, which can be identified outside. Don't be sad, this is a "feature" of JS.

To solve this problem, let's look at the code for each function:

             This );             var $divs = $ ("div");            $divs. Each (function  (index, elem) {                this);                 var x = +;            });            Console.log (x);

The printing results are as follows:

It is easy to see that the scopes in each function are different from the outside scope, and the variables defined in each function are completely local variables and are not accessible outside. This is officially what we want!

In addition, you will be able to find that each comparison is similar to the for ... in. For...in is an iterator mode that is much more convenient than for (i=0;i<length;i++). but in addition to the scope mentioned above, each and for...in are exactly the same? Of course not!

The above two pieces of code, the results are very different. Why? Because for...in iterates over an object's implicit prototype elements, each is as well-behaved as a for (i=0;i<length;i++).

8. Call and apply parameters are passed differently

They have different ways of communicating with each other. You might know, say a specific example, that jquery uses.

var arr = [5, 6, [1, 2], [3, 4]];console.log (Array.prototype.concat.call ([], arr));      // [5, 6, [1, 2], [3, 4]]Console.log (Array.prototype.concat.apply ([], arr));    // [5, 6, 1, 2, 3, 4]

The above code, the output of the result is completely different. To understand this, you can show that you really understand the difference between the two arguments.

---------------------------------------------------------------

The above is the whole content of this time. jquery will continue to look down and the notes will continue to be sorted. New content, and then share.