Introduction to the call of method in Javascript

The introduction of call() on Mozilla's official website is as follows:

call()  Method in use 1 A specified this A function or method is called on the premise of a value and several specified parameter values .

Call () syntax

fun.call(thisArg[, arg1[, arg2[, ...]]])

Call () parameters

thisArg

 in fun Specified by the function runtime this Value. The important thing to note is that it is specified this The value is not 1 Must be true when the function is executed this Value, specified as if the function is in non-strict mode null and undefined the this The value will automatically point to the global object ( In the browser window object ) , and the value is the original value ( Numbers, strings, Boolean values ) the this An auto-wrapped object that points to the original value. 

arg1, arg2, ...

 The specified parameter list. 

The call() method in Javascript

Without paying attention to the complicated explanation above, step by step, step by step, step by step, step by step.

An instance of the Call() method

So I wrote another Hello,World:

function print(p1, p2) {

    console.log( p1 + ' ' + p2);

}

print("Hello", "World");

print.call(undefined, "Hello", "World");

Both methods have the same output, however, in contrast to the call method, which also passes in an undefined.

Now, let's look at another example.

var obj=function(){};

function print(p1, p2) {

    console.log( p1 + ' ' + p2);

}
print.call(obj, "Hello", "World");

Only in this case, we're still passing in an undefined, because the undefined in the last example is because we need to pass in a parameter. There's no real usage of call here, so let's look at a better example.

function print(name) {

    console.log( this.p1 + ' ' + this.p2);

}
var h={p1:"hello", p2:"world", print:print};

h.print("fd");
var h2={p1:"hello", p2:"world"};

print.call(h2, "nothing");

call is to borrow other people's methods, objects to call, as if to call their own 1. In h.print, when a function is called as a method, this points to the relevant object. It's just that in this case we don't see whether h2 calls print or print calls h2. The example of Mozilla is cited

function Product(name, price) {

    this.name = name;

    this.price = price;
    if (price < 0)

        throw RangeError('Cannot create product "' + name + '" with a negative price');

    return this;

}
function Food(name, price) {

    Product.call(this, name, price);

    this.category = 'food';

}

Food.prototype = new Product();
var cheese = new Food('feta', 5);

console.log(cheese);

Here we can really see which object is calling which method. In the example, object instances created using the Food constructor will have the name and price properties added in the Product constructor, but the category properties are defined in their respective constructors.

function print(name) {

    console.log( this.p1 + ' ' + this.p2);

}
var h2= function(no){

    this.p1 = "hello";

    this.p2 = "world";

    print.call(this, "nothing");

};

h2();

Here h2 calls the function print as one receiver. As in the Food example, in the 1 child constructor, you can implement inheritance by calling the call method of the parent constructor.

The advantages of the Call method are described in Effective JavaScript.

1. Use the call method to customize the receiver to call the function.
2. Use the call method to call methods that do not exist in a given object.
3. Use the call method to define higher-order functions that allow the consumer to specify a receiver for the callback function.