A simple comparative analysis of the use of apply, call and this in JavaScript_javascript skills

1.apply definition

apply: Call the function, replace the this value of the function with the specified object, and replace the parameters of the function with the specified array.
Syntax: apply([thisObj[,argArray]])
thisObj
Optional. The object to use as this object.

argArray
Optional. A set of arguments to be passed to the function.

2.call definition

call: Call a method of an object and replace the current object with another object.
Syntax: call([thisObj[, arg1[, arg2[, [, argN]]]]])
thisObj
Optional. The object to be used as the current object.

arg1, arg2, , argN
Optional. The parameter list that will be passed to the method.

3. The difference between the two

The second parameter of call can be of any type, while the second parameter of apply must be an array or arguments.
There are also differences in definitions.

4. Example analysis

(1) Official example:

function callMe(arg1, arg2){
  var s = "";

  s += "this value: " + this;
  s += "<br />";
  for (i in callMe.arguments) {
    s += "arguments: " + callMe.arguments[i];
    s += "<br />";
  }
  return s;
}

document.write("Original function: <br/>");
document.write(callMe(1, 2));
document.write("<br/>");

document.write("Function called with apply: <br/>");
document.write(callMe.apply(3, [ 4, 5 ]));
document.write(callMe.call(3, 4, 5 ));
// Output: // Original function: // this value: [object Window] // arguments: 1 // arguments: 2 // Function called with apply: // this value: 3 // arguments: 4 // arguments: 5

The first one using apply: Definition: Call a function and replace the this value of the function with the specified object
Call the function callMe and replace this in the callMe function with the specified object 3. At this time, this here changes from the previous [object Window] to 3.
The first one uses call: Definition: Call a method of an object and replace the current object with another object.
Call the method of the object callMe and replace the object in callMe with another object 3.
From the analysis of these results, it can be seen that both of them use the object in the specified object or the specified value to change this in the object.
It can also be said that the object (this) in a function "hijacks" the object (this) in another function to be executed.
In fact, this raises a question: What exactly is this? Why is it so important to go through so much trouble to change its direction again and again?

(2) Example:

function zqz(a,b){
  return alert(a+b);
}
function zqz_1(a,b){
  zqz.apply(zqz_1,[a,b])
}
zqz_1(1,2)  //->3 

Analysis: According to the definition: call a function and replace the this value of the function with the specified object,
Here the function zqz is called and the this value of the zqz function is replaced with the specified object zqz_1.

Please note that the function name in js is actually an object, because the function name is a reference to the Function object!

function add(a, b)
{
 alert(a + b);
}
function sub(a, b)
{
 alert(a - b);
}
add.call(sub, 3, 1); // 4

Analysis: According to the definition: Call a method of an object and replace the current object with another object.
Here is the method of calling the object add and replacing the current object sub with the add object;

Another example:

function zqz(a,b){
  this.name=a;
  this.age=b;
  alert(this.name+" "+this.age);
}
function zqz_1(a,b){
  zqz.apply(this,[a,b])   //我们亦可以这么写  zqz.apply(this,arguments) 
}
zqz_1("Nic",12)  //Nic 12

Analysis: According to the definition: call a function and replace the this value of the function with the specified object,
Here, the function zqz is called, using the specified object this to replace the this of the function zqz.

Another example:

<input type="text" id="myText"  value="input text">
function Obj(){
  this.value="对象！";
}
var value="global 变量";
function Fun1(){
  alert(this.value);
}
Fun1();  //global 变量
Fun1.call(window); //global 变量
Fun1.call(document.getElementById('myText')); //input text
Fun1.call(new Obj());  //对象！
Fun1(); //global 变量

Analysis: Definition: Call a method of an object to replace the current object with another object.

Call the method of the Fun1 object to replace the current object in Fun1 with the window object.
Call the method of the Fun1 object and replace the current object in Fun1 with the object in input.
Call the method of the Fun1 object and replace the object in the current Fun1 with the object in the new obj.

Let’s take a look at a question raised by a netizen:

The call method can be used to call a method on behalf of another object. The call method changes the object context of a function from the initial context to the new object specified by thisObj. If the thisObj parameter is not provided, the Global object is used as thisObj.

Then I took it upon myself to write a case, but what I wrote was different from what I imagined; the code is as follows

 function parent()
 {
 alert(this.name);
 }
 function child()
 {
 var name = '张三';
 };
 
 parent.call(child); 

What he outputs is child. Why not Zhang San? According to the above sentence, the parent context has become child

And there is a name value in child. The output should be Zhang San. Please explain

 
 function parent()
 {
 alert(this.name);
 }
 function child()
 {
 this.name = '张三';
 };
 var p1 = new child();
 
 parent.call(p1); 

This can output Zhang San Why?

Let’s see what’s going on

The use of call and apply is that they can be called using variables as function names. For example, the callback function of a function. The specific usage is: executed function.call(a,b,c...), where a is the object that this needs to be specified in the executed function, which can be null, and other parameters are used as parameters of the executed function. The usage of apply is similar, except that the second parameter is an array.

Example:

function doPost(url,param,callback){
  //这里处理post请求
  var str = xhr.responseText;
  callback.apply(this,[str]);//相当于调用了callback(str);并把callback中的this设定为doPost对象
}