Learning notes _javascript techniques for call and apply in JavaScript

First look at MDN's explanation of call

The call () method invokes a function or method under the premise of using a specified this value and several specified parameter values.

Note: The effect of this method is similar to the Apply () method, except that the call () method accepts a list of several parameters, and the Apply () method accepts an array that contains more than one argument.

Grammar

Fun.call (thisarg[, arg1[, arg2[, ...)]] 

Parameters
Thisarg

The This value specified when the fun function is run. Note that the specified this value is not necessarily the true this value when the function is executed, and if the function is in a non strict mode, the this value specified as null and undefined automatically points to the global object (the browser is the Window object), and the value is the original value (the number , String, Boolean), this will point to the automatic wrapper object for the original value.

Arg1, Arg2, ...

The specified argument list.

MDN on the example at the beginning is not very good understanding, here I posted out, interested can go to see Call-javascript

The thisarg here is interpreted as the this value specified at Fun runtime, which means that when call is used, 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 that is invoked, and then because of the use of call and apply, the this in F2 points to F1, so the output becomes 123, in fact, F1 borrowed the F2 method to output their p

Deleting the THIS.P in F1 (), outputting three 456, confirms that the global variable is actually pointed when this is null or undefined

As for the original value is the wrapper object that points to it here, because I understand the wrapper object is temporary, and the test output only the type of the original value rather than object, here how to prove that if you know the friends want to discuss with me, thank you!

Since call can implement an object to borrow another object, is it possible to implement 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 F2 ()

F1.call (this);

Here the this point is F2, that is, F2 borrowed the F1 method, in fact, also realized the inheritance

Here's the argument here, the parameter is passed to fun, 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 the p in F1, and then 456 is the parameter passed to F2, it is easy to understand

The main note is the difference between the parameters in call and apply

Call is an incoming one, and apply is an array passed in

  Function F1 () { 
  this.p= "Test call"; 
 } 
 function F2 (x,y,z) { 
  console.log (THIS.P); 
  Console.log (x); 
  Console.log (y); 
  Console.log (z); 
 } 
   Function F3 () { 
  this.p= "test 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 the correct output

The second section of the Test call because of the incoming array, so first output an array then two undefined

Third paragraph test apply correct output

Fourth paragraph error directly due to parameter format errors

The difference here should be obvious.