The Apply method and call method of JavaScript function analysis from jquery source code _javascript Skill

Source: Internet
Author: User

Most recently, when using jquery's $.each method, it suddenly occurred to me that $.each ($ (' div '), function (index,entity) {}), which came out of this index and entity, and was dispensable, And so tall can tell us the current traversal of subscript and instance. So I looked at the jquery source code, and it's written like this:

Debugging time to go is the Code Red, and then use the Callback.call this function, so look at the "JS Advanced Program Design", which has a relatively deep explanation.

First, the function is a pointer to a function object, which is the one that points to functions. Then within the body of the function, there will be a scope, the This keyword.

The This keyword refers to the scope of the function's operation, for example:

Copy Code code as follows:

<script type= "Text/javascript" >
function Funca () {
alert (this);
Alert ("Function A");
}
</script>

The function Funca in the above code is defined in the global environment, then this is the Window object in the function body.

Here's a description of call and apply. Taking the call function as an example, the first parameter of call is to change the scope of the function, the following parameter is the required parameter of the incoming function, and must be the parameter of the original function, for example:

Copy Code code as follows:

<script type= "Text/javascript" >
var testo = {name: "Lily"};
function Funca (a,b) {
alert (this);
Alert ("Function A");
}

function FUNCB (A, b) {
Funca.call (Testo, A, b);
}

FUNCB (1,2); This becomes the Testo
</script>

We define the FUNCB function by invoking the call function of the Funca, when we change the point of this in Funca, which originally points to window, and now points to the first parameter testo the object. And when call is called, because the Funca function has two parameters, if you want to Funca pass the argument, you must one by one indicate the argument, that is, the following two parameters A and B, or you can just wear the first argument

namely: Funca.call (testo), or only a, namely: Funca.call (Testo,a);

The difference between apply and call is only that the second parameter of apply can be an array form, and that you do not have to one by one point the argument, funca.apply (Testo,[a,b])

After introducing the basic usage of call and apply, it's time to talk about the real use of his brother, the scope of the extension function.

Copy Code code as follows:

<script type= "Text/javascript" >
Window.color = "Transparent";
var testobj = {color: "Red"};

function Testfuc () {
alert (This.color);
}

$ (function () {
1.testFuc (); Eject "Transparent"
2.testFuc (this); Pop-up "undefined"
3.testfuc.call (this.parent); Eject "Transparent"
4.testfuc.call (window); Eject "Transparent"
5.testfuc.call (Testobj); Eject "Red"
});
</script>

The above code demonstrates the role of call. The first function call, this points to window, so the window's Color property pops up.

The second function may be that some friends think it will pop up transparently, but first make sure our function runs in $ (function () {}); In this jquery function, the friends who know jquery are well aware that in

$ (function () {}); The scope of this refers to document, and then we call TestFunc, which pops up the document's color, which is undefined, of course.

The third function will testfunc this point to the father of the document window, pop-up window color is certainly not a problem.

The fourth function is more straightforward, and the window is passed in.

The fifth function, which points the testfunc to the testobj, pops up the red.

Here, the use of everyone should have some understanding, but specifically how to understand how to use or look at their own routines.

I understand that this usage can be thought of as a generic method in C # or Java. For example, the definition of a C # method

Copy Code code as follows:

public void test<t> (t A, T b) {}

In this way, we can extend the method to achieve the common purpose.

These are my own views and views, what is wrong and please point out to learn together.

Related Article

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.