JavaScript call apply

Source: Internet
Author: User

Apply and call, which function by binding functions to another object, differ only in the way in which the parameters are defined:
Function.prototype.apply (Thisarg,argarray);
Function.prototype.call (Thisarg[,arg1[,arg2 ...]);
As you can see from the function prototype, the first parameter is named Thisarg, which means that the this pointer inside all functions is assigned a value of Thisarg, which implements the purpose of running the function as a method of another object. Two methods except for the Thisarg parameter, are the parameters passed for the function object. The following code illustrates how the Apply and call methods work:


Defines a function func1, with properties p and method a
function Func1 () {
this.p= "func1-";
This. A=function (ARG) {
alert (THIS.P+ARG);
}
}
Defines a function Func2, with properties p and method b
function Func2 () {
this.p= "func2-";
This. B=function (ARG) {
alert (THIS.P+ARG);
}
}
var obj1=new func1 ();
var obj2=new func2 ();
Obj1. A ("Bya"); Show Func1-bya
Obj2. B ("Byb"); Show Func2-byb
Obj1. A.apply (obj2,["bya"]); Display Func2-bya, where ["Bya"] is an array of only one element, the same as
Obj2. B.apply (obj1,["BYB"]); Show Func1-byb
Obj1. A.call (Obj2, "bya"); Show Func2-bya
Obj2. B.call (obj1, "byb"); Show Func1-byb

As can be seen, Obj1 's method A is bound to the OBJ2 run, the entire function A's running environment is transferred to the OBJ2, that is, the this pointer points to the OBJ2. The same obj2 function B can also be bound to the Obj1 object to run. The last 4 lines of code show the differences in the form of the Apply and call function parameters.

Unlike the length property of arguments, the function object also has a property length, which represents the number of parameters that are specified when the function is defined, rather than the number of arguments that were actually passed when it was transferred.

Let's look at the explanation of call in the JS manual:

Call Method
Invokes one method of an object, replacing the current object with another object.
Call ([thisobj[,arg1[, arg2[, [,. ArgN]]])
Parameters
Thisobj
Options are available. The object that will be used as the current object.
Arg1, Arg2,, ArgN
Options are available. The method parameter sequence will be passed.
Description
The call method can be used to invoke a method in place of another object. The call method can change the object context of a function from the initial context to a new object specified by Thisobj.
If the Thisobj parameter is not provided, then the Global object is used as the thisobj.

To be clear is actually to change the object's internal pointer, that is, to change the object's this point to the content. This is sometimes useful in the object-oriented JS programming process.

<input type= "text" id= "MyText" value= "input text" >
<script>
function Obj () {this.value= "Object! ";}
var value= "global variable";
function Fun1 () {alert (this.value);}
Window. Fun1 (); Global variables
Fun1.call (window); Global variables
Fun1.call (document.getElementById (' MyText ')); Input text
Fun1.call (New OBJ ()); Object!

The first parameter of the call function and the Apply method is the object to pass to the current object, and this inside the function. The arguments that follow are all arguments passed to the current object.

<script>
var func=new function () {this.a= "func"}
var myfunc=function (x) {
var a= "MyFunc";
alert (THIS.A);
alert (x);
}
Myfunc.call (func, "Var");
</script>

It is visible that Func and Var are ejected separately. Here you get a sense of the meaning of each of the call's parameters.

Both apply and call are the same in effect, but they differ in parameters.
The meaning for the first parameter is the same, but for the second argument:
Apply passes in an array of parameters, which is the combination of multiple parameters into an array, and call is passed in as a call parameter (starting with the second argument).
such as Func.call (FUNC1,VAR1,VAR2,VAR3) corresponding to the wording of the Apply: Func.apply (Func1,[var1,var2,var3])

The benefit of using apply at the same time is that you can directly pass in the arguments object of the current function as the second parameter of apply

JavaScript Apply usage supplement
Funobj.apply ([Thisobj[,argarray]])
Applies one method of an object, replacing the current object with another object.
When the Functionobj method executes, the This object in the function is replaced by thisobj.
Thisobj options available. The object that will be used as the current object.
Argarray options available. An array of arguments that will be passed to the function.


Apply applies to object inheritance, without using prototype, implicitly assigning parent object properties to child objects
Function par (name)
{
This.parname=name;
}
function Child (Chname,parname) {
This.chname=chname;
Par.apply (this,new Array (parname));
};
var o=new child ("John", "Mr John");
Alert (o.parname+ ";") +o.chname);
Apply can be used in a common method invocation
Window.onunload=function ()
{
Alert ("Unload event is fired!");
}
function Saybye (name,toname)
{
Alert (name+ "says bye to" +toname);
}
function Sayendbiz (name,toname,content)
{
Alert (name+ "ends his talk about" +content + "with" +toname);
}
function AddTo (args,func)
{
var oldhandler=window.onunload| | function () {};
Window.onunload=function ()
{
Func.apply (Window,args);
oldhandler.apply (window, args);
}
}
AddTo (New Array ("John", "everyone"), Saybye);
AddTo (New Array ("John", "Everyone", "deveopment strategy of the Company"), Sayendbiz)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.