Usage and call in JavaScript using meaning and difference description _javascript skills

Source: Internet
Author: User
Tags function prototype
Apply and call, which function by binding functions to another object, differ only in the way that 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 argument is named Thisarg, that is, the this pointer within all functions is assigned to THISARG, which enables you to run the function as a method of another object. Two methods except the Thisarg parameter, are the parameters passed for the function object. The following code illustrates how the Apply and call methods work:
Copy Code code as follows:

Defines a function func1, with attribute p and method a
function Func1 () {
this.p= "func1-";
This. A=function (ARG) {
alert (THIS.P+ARG);
}
}
Defines a function func2, with attribute 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"]); Displays 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 operating environment is shifted to the obj2, that is, the this pointer points to OBJ2. The same obj2 function B can also be bound to the Obj1 object to run. The last 4 lines of code show the difference between the form of apply and call function arguments.

Unlike the length property of the arguments, the function object also has a property length that represents the number of parameters that are specified when the function is defined, not the number of arguments actually passed when it was invoked. For example, the following code will show 2:
Copy Code code as follows:

function sum (a,b) {return a+b}


Here's a look at the explanation for call in the JS manual:

Call Method
Invokes one of the object's methods to replace the current object with another object.
Call ([thisobj[,arg1[, arg2[, [,. argn]]]]
Parameters
Thisobj
Options available. The object that will be used as the current object.
Arg1, Arg2, argn.
Options available. A sequence of method parameters is passed.
Description
The call method can be used to invoke a method instead of another object. The call method can change the object context of a function from the initial context to the new object specified by Thisobj.
If the thisobj parameter is not supplied, the Global object is used as a thisobj.

To be clear is to change the inner pointer of an object, that is, to change the content that this object is pointing to. This is sometimes useful in the object-oriented JS programming process.

Quote a piece of code on the Web, after running naturally understand its rationale.

<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 variable Fun1.call (window); Global variable Fun1.call (document.getElementById (' MyText ')); Input text Fun1.call (new OBJ ()); Object! </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

The first parameter of the call function and the Apply method is the object to pass to the current object, and this within the function. Subsequent arguments are parameters that are passed to the current object.
Run the following code:
<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>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Visible Func and Var are ejected separately. Here we have an idea of the meaning of every parameter of call.

Both apply and call are the same in effect, but they differ in their parameters.
Is the same for the first parameter, but for the second argument:
Apply passes in an array of arguments, which is the combination of multiple arguments into an array, while call is passed as a call parameter (starting with the second argument).
such as Func.call (FUNC1,VAR1,VAR2,VAR3) corresponding apply is written as: Func.apply (FUNC1,[VAR1,VAR2,VAR3))

The advantage of using apply at the same time is that you can simply pass the arguments object of the current function as the second argument to apply

JavaScript Apply UsageAdd
Funobj.apply ([Thisobj[,argarray]])
Applies a 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 the thisobj.
Thisobj can be selected. The object that will be used as the current object.
Argarray can be selected. An array of arguments to be passed to the function.
Copy Code code as follows:

Apply in the application of object inheritance, do not use prototype, implicitly assigns the parent object attribute to the child object
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 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)
Related Article

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.