Introduction to code examples of the apply method and call method of JavaScript functions

Recently, when I was using the $.each method of jQuery, I suddenly thought of $.each($('p'),function(index,entity){}); Where did the index and entity in appear, and they are dispensable, and they can tell us the subscript and instance of the current traversal. So I took a look at the jQuery source code, and it was written like this:

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

First of all, function is a pointer to Function object, and the function name is a pointer to the 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,

<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 in the function body is 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 following parameters are the required parameters passed into the function, which must be consistent with the parameters of the original function. For example:

<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变成了testO
    </script>

We defined the funcB function and called the call function of funcA. At this time, we changed the pointer 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 beArray form, 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, what should I say? It is said that the real use of the two brothers is to expand the scope in which the function operates.

<script type="text/javascript">
        window.color = "透明";
        var testObj = { color: "红色" };

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

        $(function () {
            1.testFuc(); //弹出“透明”
            2.testFuc(this); //弹出“undefined”
            3.testFuc.call(this.parent); //弹出“透明”
            4.testFuc.call(window); //弹出“透明”
            5.testFuc.call(testObj); //弹出“红色”
        });
</script>

The above code demonstrates the function of call. In the first function call, this points to the window, so the colorattribute of the 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 popular among friends who know jQuery. Clearly, the scope of this in

$(function(){}); points to 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. The window is passed in.

The fifth function points testFunc's this to testObj and pops up red.

At this point, everyone should have an understanding of its usage, but how to specifically 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

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

allows us to extend the method and achieve general purposes.

The above is the detailed content of Introduction to code examples of the apply method and call method of JavaScript functions. For more information, please follow other related articles on the PHP Chinese website!