Introduction to apply and call

function f1(x, y) {
    console.log("The result is:" + (x + y) + this);
}
f1(10, 20); //Function call
// The result is: 30[object Window]

// At this time, f1 is actually used as an object, which can call methods
f1.apply();  // The result is: NaN[object Window]
f1.call();   // The result is: NaN[object Window]

f1.apply(null);  // The result is: NaN[object Window]
f1.call(null);  // The result is: NaN[object Window]

• If there is no parameter passed in or null passed in in the apply and call methods, then this in the function object calling the method is the default window
• Both apply and call can be called by a function or method. The incoming parameters are not written in the same way as the function's own call, but the effect is the same.

f1.call(null,10,20);  // The result is: 30[object Window]
f1.apply(null,[10,20]);  // The result is: 30[object Window]

• Basic use

function f2(x, y ){
    console.log("Result:"+(x+y)+"  "+ this.age );
}
window.f2(10, 20);  //Result: 30 undefined
// obj is an object
var obj = {
    age: 10,
    sex: "male"
};
window.f2.apply(obj,[10, 20]);  //Results: 30 10
window.f2.call(obj,10,20);  //Results: 30 10
console.dir(obj);  // age: 10 sex: "male"

The role of apply and call: changing the direction of this

apply and call can change the direction of this

Example 1: for method

function Person(age, sex){
    this.age = age;
    this.sex = sex;
}
//Add method by prototype
Person.prototype.sayHi=function(){
    console.log("Hello,"+this.sex);
}
var per = new Person(10,"male");
per.sayHi(); // Hello, man

function Student(name, sex){
    this.name = name;
    this.sex = sex;
}
var stu=new Student("Xiao Ming", "female");
per.sayHi.apply(stu); // Hello, female
per.sayHi.call(stu);  // Hello, female
// stu does not have sayHi(), but it can call sayHi() of per through apply or call

Example 2: for functions

function f(x, y){
    console.log("The result is:"+(x+y)+"  "+this);
    return "At this point this yes"+this;
}
// apply and call calls
var r1=f.apply(null,[1,2]); // this in f is window
console.log(r1);
//The result is: 3 [object window]
// this is [object Window]
var r2=f.call(null,1,2); // this in f is window
console.log(r2);
 //The result is: 3 [object window]
// this is [object Window]

// Change the direction of this
var obj={
    sex: "male"
}
// Originally, f function is window object, but after passing obj, f function is obj object's
var r3=f.apply(obj,[1,2]); // this in f is obj
console.log(r3);
// The result is: 3 [object object]
// this is [object Object]
var r4=f.call(obj,1,2); // this in f is obj
console.log(r4);
// The result is: 3 [object object]
// this is [object Object]

Summary of usage of apply and call

How to use apply:

Function name. Apply (object, [parameter 1, parameter 2,...]);
Method name. Apply (object, [parameter 1, parameter 2,...]);

How to use call:

Function name. Call (object, parameter 1, parameter 2,...);
Method name. Call (object, parameter 1, parameter 2,...);

The difference between apply and call:

• Parameters are passed in different ways

Usage scenarios

As long as you want to use the method of other objects and want the method to be the current object, you can use the apply or call method to change the direction of this.

• The apply and call methods are not actually in the Function instance object, but in the prototype of the Function.