JavaScript apply () and call ()

Original link http://www.jb51.net/article/30883.htm

To understand thoroughly apply () and call (), also need to understand this scope local variables global variables

JS apply () and call ()  

1. Each function contains two non-inherited methods: Apply () and call (). 2. They are used in the same way, and are called functions in a specific scope. 3, the receiving parameter mode is different

Example 1: Copy code code as follows: Window.firstname="Diz"; Window.lastname="Song"; varMyObject = {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); Run Result: Hello Diz song glad to meet!Hello my Object glad to meet!

Example 2: Copy code code as follows: function sum (NUM1, num2) {return NUM1 +  Analysis: in Example 1, we find that the real application of apply () and call () is the ability to extend the scope of functions on which they are run


If we want to implement it in a traditional way, see the following code:

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 Accents's code, we find that to make the Helloname () function scoped on the object MyObject, we need to dynamically create the Helloname property of the MyObject, which points to the Helloname () function as a pointer, so that 　　When we call Myobject.helloname (), the This variable inside the function points to MYOBJECCT, and you can call the internal other public properties of the object. 　　By analyzing example 2, we can see the real use of the call () and apply () functions, and in the actual project, it is necessary to deal with the actual flexibility! A small problem: take a look at the function defined in the function, the case of this variable copy code is as follows: function Temp1 () {Console.log ( This);//Object {}function Temp2 () {Console.log ( This);//Window} temp2 (); } varOBJ ={}; Temp1.call (OBJ);//run the result see above green comment!!!! the execution results are identical to the following: the copy code code is as follows: function Temp1 () {Console.log ( This); Temp2 (); } function Temp2 () {Console.log ( This); } varOBJ ={}; Temp1.call (OBJ);4, Bind () method The browser that supports this method has IE9+, firefox4+, Safari5.1+, opera12+, Chrome. It is a method that belongs to ECMAScript5. Look directly at the example: Copy the code code as follows: Window.color="Red"; varo = {color:"Blue" }; function Saycolor () {alert ( This. color); } varOsaycolor =Saycolor.bind (o); Osaycolor (); //Bluehere, Saycolor () calls the Bind () method, passes in the O object, returns the Osaycolor () function, and in Osaycolor (), the value of this is an O object. 

JavaScript apply () and call ()