Analyze the apply method and call method of JavaScript function from JQuery source code_javascript skills

When I was using jQuery’s $.each method recently, I suddenly thought about where the index and entity in $.each($('div'),function(index,entity){}); came from. , and it is dispensable, and it can tell us the subscript and instance of the current traversal. So I took a look at the jQuery source code and found this:

When debugging, I used the code marked in red, and then used the callback.call function, so I took a look at "JS Advanced Programming", which has a relatively in-depth explanation.

First of all, function is a pointer to a Function object, and the function name is a pointer to a function. Then within the function body, there will be a scope, which is the this keyword.

This keyword refers to the scope in which the function runs. For example:

Copy code The code is 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, so this in the function body is the window object.

Now it’s time to explain call and apply. Take the call function as an example. The first parameter of call is to change the scope of the function. The subsequent parameters are the required parameters passed into the function and must be consistent with the parameters of the original function. For example:

Copy code The code is 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 testO
</script>

In the definition of funcB function, we called the call function of funcA. At this time, we changed the pointing of this in funcA. It originally pointed to window, but now points to the object testO, the first parameter of call. And when calling call, because the funcA function has two parameters, if you want funcA to pass parameters, you must point out the parameters one by one, that is, the next two parameters a and b, or you can only pass the first parameter

That is: funcA.call(testO); or just pass a, that is: funcA.call(testO,a);

The only difference between apply and call is that the second parameter of apply can be in the form of an array, and there is no need to point out the parameters one by one, funcA.apply(testO,[a,b])

After introducing the basic usage of call and apply, it’s time to talk about the real use of these two brothers, which is to expand the scope in which the function operates.

Copy code The code is as follows:

<script type="text/javascript">
          window.color = "Transparent";
        var testObj = { color: "red" };

function testFuc() {
alert(this.color);
}

$(function () {
​​​​​​ 1.testFuc(); //Pop up "transparent"
​​​​​​ 2.testFuc(this); //Pop up "undefined"
​​​​​​ 3.testFuc.call(this.parent); //Pop up "transparent"
​​​​​​ 4.testFuc.call(window); //Pop up "transparent"
​​​​​​ 5.testFuc.call(testObj); //Pop up "red"
        });
</script>

The above code demonstrates the function of call. In the first function call, this points to window, so the color attribute of window pops up.

Some friends may think that the second function will also pop up transparent, but please first make sure that our function is running in $(function(){});. This jQuery function is very clear to friends who know jQuery.

The scope of this in

$(function(){}); points to the document, and then we call testFunc to pop up the color of the document, which is of course undefined.

The third function points the this of testFunc to the parent window of the document. Of course, there is no problem in popping up the color of the window.

The fourth function is more straightforward, passing window into it

The fifth function points the this of testFunc to testObj, and a red color pops up.

At this point, everyone should have an understanding of how to use it, but how to understand and use it depends on your own routine.

This is how I understand it. This usage can be regarded as a generic method in C# or java. For example, the definition of a C# method

Copy code The code is as follows:

public void Test<T>(T a, T b) { }

In this way, we can extend the method and achieve general purposes.

The above are my own views and opinions. If there is anything wrong, please point it out and learn from it together.