1. Each function contains two methods that are not inherited: Apply () and call ().
2, they are used the same, are in a specific scope of the call function.
3, receive parameters, apply () receive two parameters, one is the scope of the function run (this), the other is a parameter array.
The first parameter of the call () method is the same as the Apply () method, but the arguments passed to the function must be enumerated.
Example 1:
Copy Code code as follows:
Window.firstname = "Diz";
Window.lastname = "song";
var myObject = {firstName: "My", LastName: "Object"};
function Helloname () {
Console.log ("Hello" + This.firstname + "" + This.lastname, "Glad to meet you!");
}
Helloname.call (window); Huo. Call (this);
Helloname.call (MyObject);
The results of the operation are:
Hello Diz song glad to meet you!
Hello my Object glad to meet you!
Example 2:
Copy Code code 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 real use of apply () and call () was to expand the scope on which the function was run, and if we wanted to do it in a traditional way, see the following code:
Copy Code code as follows:
Window.firstname = "Diz";
Window.lastname = "song";
var myObject = {firstName: "My", LastName: "Object"};
function Helloname () {
Console.log ("Hello" + This.firstname + "" + This.lastname, "Glad to meet you!");
}
Helloname (); Hello Diz song glad to meet you!
Myobject.helloname = Helloname;
Myobject.helloname (); Hello my Object glad to meet you!
See Garon's code, we found that to make the Helloname () function scoped to the object MyObject, we need to dynamically create the MyObject Helloname property, which is the pointer to the Helloname () function, so that When we call Myobject.helloname (), the This variable inside the function points to myobjecct, and can invoke other public properties within the object.
By analyzing example 2, we can see the real use of the call () and apply () function, in the actual project, also need to deal with the actual flexibility!
A small problem: look at the function defined in the function, the case of this variable
Copy Code code as follows:
function Temp1 () {
Console.log (this); Object {}
function Temp2 () {
Console.log (this); Window
}
Temp2 ();
}
var Obj = {};
Temp1.call (OBJ); Run results see the green annotation above!!!!
The execution results are the same as the following:
Copy Code code 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. See examples directly:
Copy Code code 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 and passes in the O object, returning the Osaycolor () function, in Osaycolor (), the value of this is an O object.
