Study notes on call and apply in Javascript

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

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

Note: The function of this method is similar to that of the apply() method, with only one difference, that is, 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[, ...]]]])

parameter

thisArg

This value specified when the fun function is running. It should be noted that the specified this value does not necessarily mean the real this value when the function is executed. If this function is in non-strict mode, this value specified as null and undefined will automatically point to the global object (the window object in the browser), and this value with the original value (number, string, boolean value) will point to the automatic wrapping object of the original value.

arg1, arg2, ...

Specified parameter list.

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

ThisArg here is interpreted as this value specified when fun runs, that is, 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 called. 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, deleting this.p in f1() will output three 456, which confirms that when this is null or undefined, it actually points to the global variable.

As for the wrapping object that points to the original value, since the wrapping objects I understand are temporary, and only the type of the original value is output during the test instead of the object, how to prove it here if anyone knows it can discuss it with me if you hope it will be discussed with me, thank you!

Since call can implement one object to borrow another object, can it 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 in f2()

f1.call(this);

This here points to f2, that is, 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 see the code

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

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

Mainly pay attention to the difference between the parameters in call and apply

Call is passed in one by one, while 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 test call is passed in an array, so one array is first output and two undefined

The third paragraph test applies the correct output

The fourth paragraph directly reported an error due to the error in the parameter format

The difference here should be obvious