Understanding of JavaScript Call and apply

Source: Internet
Author: User

These two methods are difficult for some novices to figure out what is going on in the end, and for me I understand the way call and apply are more ambiguous. Today is nothing to be prepared to completely call and apply exactly what is going on. The spirit of sharing the Internet. I will share my own understanding with you.

Objective

Here is the information I found on the Internet.

Each function object in JavaScript has an apply () method and a call () method.

Their respective definitions:

    Apply: One method of applying an object that replaces the current object with another object. For example: b.apply (A, arguments); A method that applies a B object to a object.

Call: Invokes one method of an object, replacing the current object with another object. For example: B.call (A, args1,args2); A method that a object calls a B object.

  What they have in common:

All "can be used instead of another object to invoke a method that changes the object context of a function from the initial context to the new object specified by Thisobj."

  The difference between them:

Apply: There can be at most two parameters-the new this object and an array Argarray. If you pass multiple arguments to the method, the arguments are written into the array, and of course, even if there is only one argument, it is written into the array. If Argarray is not a valid array or arguments object, it will result in a typeerror. If none of the Argarray and Thisobj parameters are provided, then the global object is used as a thisobj and cannot be passed any parameters.

Call: It can accept multiple parameters, the first parameter is the same as apply, followed by a list of parameters. This method is mainly used when the JS object method calls each other, so that the current this instance pointer is consistent, or in special cases need to change the this pointer. If the Thisobj parameter is not provided, then the Global object is used as the thisobj.

In fact, the function of apply and call is the same, except that the parameter list is passed in as a different form.

Call method

is equivalent to putting the method of a in the B method to execute.

function A (b) {    Console.log (a+b);} function B (a) {    console.log (a-b);} A.call (b,1,3);  Output 4

In addition, the call method will change the point of this

function A (b) {    console.log (' This ',this)    Console.log (a+b);} function B (a) {    console.log (a-b);} A.call (b,1,3);  This,b  4

Using the call method in a constructor environment

Since there is no ShowName method within the B function, using call is equivalent to executing the ShowName method in the instantiation method of B. So the output is bfun.

functionA () { This. Name = ' Afun ';  This. ShowName =function() {Console.log ( This. Name)}}functionB () { This. Name = ' Bfun ';}varAexample =NewA ();//Instantiate avarBexample =Newb ();//Instantiate BAexample.showname ();//Output AfunAExample.showName.call (bexample);//Output Bfun

The inheritance of call

If the first parameter in call passes in this, then all properties of a are inherited. However, if A and B have the same properties, the value of a will overwrite the value of B.

function A (name) {    this. Name = name;       This function () {        Console.log (this. Name)    }}function  B (name) {     this. Name = 123;    A.call (this, name);} var new B (' 123456 '); Cat.showname ();     Output 123456, if there is no this.name attribute in a, then the output will be 123
Apply method

The usage of apply is almost identical to the use of call, except that the second parameter is different. The second parameter required by apply is an array.

function A (A, b) {    console.log (this);    Console.log (a+b);} function B (A, a    ) {return A-b;}  A.apply (b,[4,2]); // Output B  6

Understanding of JavaScript Call and apply

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.