Introduction to the use of the apply () and call () methods in JavaScript

1. Each function contains two non-inherited methods: apply () and call ().
2. they use the same functions and call functions in specific scopes.
3. The receiving parameters are different. apply () receives two parameters: one is the function running scope (this), and the other is the parameter array.
The first parameter of the call () method is the same as that of the apply () method, but the parameters passed to the function must be listed.
Example 1: Copy codeThe Code is as follows: window. firstName = "diz ";
Window. lastName = "song ";
Var myObject = {firstName: "my", lastName: "Object "};
Function HelloName (){
Console. log ("Hello" + this. firstName + "" + this. lastName, "gglad to meet you! ");
}
HelloName. call (window); // huo. call (this );
HelloName. call (myObject );

The running result is:
Hello diz song gglad to meet you!
Hello my Object gglad to meet you!
Example 2:Copy codeThe Code is as follows: function sum (num1, num2 ){
Return num1 + num2;
}
Console. log (sum. call (window, 10, 10); // 20
Console. log (sum. apply (window, [10, 20]); // 30

Analysis: In example 1, we found that the true use of apply () and call () is to expand the scope on which the function depends. If we want to implement it using the traditional method, see the following code:Copy codeThe Code is as follows: window. firstName = "diz ";
Window. lastName = "song ";
Var myObject = {firstName: "my", lastName: "Object "};
Function HelloName (){
Console. log ("Hello" + this. firstName + "" + this. lastName, "gglad to meet you! ");
}
HelloName (); // Hello diz song gglad to meet you!
MyObject. HelloName = HelloName;
MyObject. HelloName (); // Hello my Object gglad to meet you!

See the code in red. We found that to make the HelloName () function scope on the object myObject, We need to dynamically create the HelloName attribute of myObject, which points to the HelloName () function as a pointer, in this way, when we call myObject. when HelloName () is used, this variable inside the function points to myObjecct, and other public attributes inside the object can be called.
Through analysis example 2, we can see the real use of the call () and apply () functions. In actual projects, we also need to flexibly handle them according to the actual situation!
A small problem: Let's take a look at the situation of this variable when the function is defined in the function.Copy codeThe Code is as follows: function temp1 (){
Console. log (this); // Object {}
Function temp2 (){
Console. log (this); // Window
}
Temp2 ();
}
Var Obj = {};
Temp1.call (Obj); // For the running result, see the green comment above !!!!

The execution result is the same as the following:Copy codeThe Code is as follows: function temp1 (){
Console. log (this );
Temp2 ();
}
Function temp2 (){
Console. log (this );
}
Var Obj = {};
Temp1.call (Obj );

4. bind () method
Browsers that support this method include IE9 +, Firefox4 +, Safari5.1 +, Opera12 +, and Chrome. It belongs to the ECMAScript5 method. Let's look at the example:

Copy codeThe Code is as follows: window. color = "red ";
Var o = {color: "blue "};
Function sayColor (){
Alert (this. color );
}
Var OSayColor = sayColor. bind (o );
OSayColor (); // blue

Here, sayColor () calls the bind () method, passes in the o object, and returns the OSayColor () function. In OSayColor (), the value of this is the o object.