Js notes (9)-some knowledge points recorded when interpreting jquery source code

Source: Internet
Author: User

Recently, I have been using my spare time to read jquery2.1.1 source code, and I have read about two thousand lines. At ordinary times, I made some notes and posted them for sharing. 1. array. prototype. slice. call can convert a pseudo array to a real array. In fact, the so-called "pseudo array" here has the length attribute, and there are "0", "1", "2" and other attributes of the object, the following code: copy the code var obj = {0: "A", 1: "B ", 2: "C", length: 3}; var slice = []. slice; console. log (slice. call (obj); in addition, the $ ('div ') We usually write is actually such a pseudo array. You can take a look at it: one method in jquery source code is used to determine whether the object is a pseudo array. It is determined based on whether the object has the length attribute and whether the [length-1] attribute of the object has a value. This will exclude a special type -- String and string with the length attribute, but it is indeed not a pseudo array. In the code above, slice. call not only converts the pseudo array into a real array, but also captures elements like the slice in the array. 2. the window object also has a "window" attribute in jquery source code. when determining whether an object is a window, use the following method to judge: return obj. window = window; when you use a 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. Shortcuts forcibly convert an object to the corresponding bool type. Available :!! If the obj type is converted to the same bool type, the following options are available :! Obj 4. = and = are strictly equal, no type conversion is performed, and = is not strictly equal, type conversion is performed. In some js books, we recommend that developers never use = or! =. However, in jquery source code, "=" or "! = "-- When determining undefined and null. 5. the toString () method is rewritten for some object types. Therefore, to obtain the object name, you cannot simply use it. toString (), but uses Object. prototype. toString. call var a = [1, 2]; console. log (. toString (); // 1, 2console. log (Object. prototype. toString. call (a); // [Object Array] 6. object ('str') -- after the String type is forcibly converted to the Object type, a standard pseudo array object is returned. Object ('abc') --> String {0: "a", 1: "B", 2: "c", length: 3} 7. the biggest advantage of jQuery's each function is that compared with the for loop, the biggest improvement is to close the independent function scope. Let's take a look at the for loop code: copy the code console. log ("current this", this); var $ divs = $ ("div"), index = 0, length = $ divs. length; for (; index <length; index ++) {console. log (index, this); var j = 200;} console. log (j); the printed results show that the statement block in the for loop is the same as the external scope. The most terrible thing is that the variables defined in the for loop can be identified outside. Don't be sad. This is a "feature" of js ". To solve this problem, let's look at the code of the each function: copy the code console. log ("current this", this); var $ divs = $ ("div"); $ divs. each (function (index, elem) {console. log (index, this); var x = 100;}); console. log (x); it is easy to see that the scope of the each function is different from the external scope, and the variables defined in the each function are completely local variables and cannot be obtained outside. This is what we want! In addition, you may find that each is similar to for... in. For... in is the iterator mode, which is much more convenient than for (I = 0; I <length; I ++. But apart from the scope mentioned above, is each and for... in exactly the same? Of course not! The above two sections of code have different results. Why? Because for... in will traverse the implicit prototype element of an object, and each is as expected as for (I = 0; I <length; I ++. 8. The call and apply parameters are passed in different ways. You may know that they have different parameter passing methods. Let's look at a specific example, which is used in jquery. 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 output results are completely different. Only by understanding this can you really understand the differences between the two parameters.

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.