Call and apply

Time:2019-9-12

With the following questions:
1. What is the difference between call and apply?
2. Under what circumstances is call used? When does apply work?
3. What are the benefits of apply?

Apply and call can both hijack the method of another object and inherit the attributes of another object. Let’s see some differences between them.
Here’s how the code works:

Function. apply (obj, arguments) method can receive two parameters
Obj: This object's this pointer will replace this pointer in the Function class
Arguments: This is an array, which is passed as a parameter to Function (args - > arguments)

Apply example:

    function Person(name, age) {
        this.name = name;
        this.age = age;
    }

    function Boy(name, age, job) {
        Person.apply(this, arguments);
        this.job = job;
    }

    const boy = new Boy('Phoenix', 27, 'programmer');

    console.log(boy.name, boy.age, boy.job);   // Phoenix 27 programmer

In the Boy constructor in the code above, we did not construct the name and age parameters.
But there are still three parameters in the instantiated object boy, which is the charm of apply.

Call example:

    function Person(name, age) {
        this.name = name;
        this.age = age;
    }

    function Boy(name, age, job) {
        Person.call(this, name, age);
        this.job = job;
    }

    const boy = new Boy('Phoenix', 27, 'programmer');

    console.log(boy.name, boy.age, boy.job);   // Phoenix 27 programmer

The name and age parameters in Boy above all point to the name and age parameters in Person.
From the above two examples, we can find that the difference between call and apply is only in the form of parameters.
The second parameter of the apply method is an array of parameters.
The second parameter of call method is the expanded data. In ES6, it can also be Function. call (this,… Arguments), and the effect is the same.


So what are the convenient functions of the application method?
(1) Math. Max () will find the largest of all the parameters.

Math.max(1, 2, 3)   // 3

If this method can be used in this way, it would be a chicken rib.
If he can pass an array, isn’t it very useful for us to find the largest number in the array?

const arr = [1, 2, 3];
Math.max.apply(null, arr)    // 3
// Of course, since ES6 came into being, there have been expansion operators... and the same results can be obtained.
Math.max(...arr);    // 3

Of course, the apply method is not just used in this place.
Join us and we want to integrate the two arrays together.
(2)Array.prototype.push.apply(arr1, arr2);

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1);    // [1, 2, 3, 4, 5, 6]
// After ES6 
// Ar1. push (... arr2) works the same way

In fact, after the emergence of ES6, many functions that could be expanded by apply in the past were basically replaced by… Expansion operators.

Conclusion:

You can learn the use of apply and call from the above, and also taste the sweetness of ES6, but don't forget the past but knowledge, grammar sugar, but the implementation principle is also derived from the old version of JS, the foundation is particularly important!

Recommended Today

Hadoop MapReduce Spark Configuration Item

Scope of application The configuration items covered in this article are mainly for Hadoop 2.x and Spark 2.x. MapReduce Official documents https://hadoop.apache.org/doc…Lower left corner: mapred-default.xml Examples of configuration items name value description mapreduce.job.reduce.slowstart.completedmaps 0.05 Resource requests for Reduce Task will not be made until the percentage of Map Task completed reaches that value. mapreduce.output.fileoutputformat.compress false […]