Study notes on call and apply in Javascript_javascript skills

Let’s first look at the explanation of call in MDN

The call() method calls a function or method using a specified this value and several specified parameter values.

Note: The function of this method is similar to the apply() method. The only difference is that the call() method accepts a list of several parameters, while the apply() method accepts an array containing multiple parameters.

Grammar

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

Parameters
thisArg

The this value specified when the fun function is running. It should be noted that the specified this value is not necessarily the real this value when the function is executed. If the function is in non-strict mode, the this value specified as null and undefined will automatically point to the global object (in the browser, it is window object), and this whose value is a primitive value (number, string, Boolean value) will point to the automatic wrapping object of the primitive value.

arg1, arg2, ...

The specified parameter list.

The examples on MDN were not easy to understand at first, so I posted them here. If you are interested, you can check them out for yourself call-Javascript

The thisArg here is interpreted as the this value specified when fun is running. That is to say, after using call, this in fun points to thisArg? Look at the code

 var p="456"; 
 function f1(){ 
  this.p="123"; 
 } 
 function f2() { 
  console.log(this.p); 
 } 
 f2();       //456  f2.call(f1());  //123  f2.apply(f1());  //123

The first output is the global variable of the call. Later, due to the use of call and apply, this in f2 points to f1, so the output becomes 123. In fact, f1 borrows the method of f2 and outputs its own p

At this time, delete this.p in f1(), and three 456s will be output, which confirms that when this is null or undefined, it actually points to the global variable

As for pointing to the original value, it points to its packaging object. Since the packaging objects I understand are temporary, and the test only outputs the type of the original value instead of object, how can I prove it here? If anyone knows, I hope you can Discuss it with me, thank you!

Since call can realize one object borrowing another object, can’t it also realize inheritance? Look at the code

 function f1(){ 
  this.father="father"
 } 
 function f2() { 
  f1.call(this); 
  this.child="child"; 
 } var test=new f2(); 
console.log(test.father);  //father

There is no father in test, because of the

in f2()

f1.call(this);

This here points to f2, which means that f2 borrows the method of f1, which actually realizes inheritance

Let’s talk about the parameters here. The parameters here are passed to fun. Let’s look at the code

 function f1(){ 
  this.p="123"; 
 } 
 function f2(x) { 
  console.log(this.p); 
  console.log(x); 
 } 
 f2.call(f1(),456);   //123 
//456

The first output is 123 because of the p in f1, and the subsequent 456 is the parameter passed to f2. It is easy to understand

The main thing is to pay attention to the difference between the parameters in call and apply

call is passed in one by one, and apply is passed in an array

  function f1(){ 
  this.p="测试call"; 
 } 
 function f2(x,y,z) { 
  console.log(this.p); 
  console.log(x); 
  console.log(y); 
  console.log(z); 
 } 
   function f3(){ 
  this.p="测试apply"; 
 } 
 f2.call(f1(),4,5,6);  
 f2.call(f1(),[4,5,6]);  
 f2.apply(f3(),[4,5,6]); 
 f2.apply(f3(),4,5,6);

You can see the results here

The first test call is output correctly

Since the second test call is passed in an array, it first outputs an array and then two undefined

The third section of test apply outputs correctly

The fourth paragraph directly reports an error due to incorrect parameter format

The difference here should be obvious