The difference between apply and call in JavaScript

This article describes how to apply and call in JavaScript. It has good reference value. Next, let's take a look at it. This article mainly introduces the knowledge of apply and call in JavaScript. It has good reference value. Let's take a look at it with the small Editor.

Difference between apply and call

The ECMAscript Specification defines the call and apply methods for all functions. They are widely used and serve the same purpose, but they only differ in the form of parameter passing.

Apply ()

The apply method is used to input two parameters: one is the object used as the function context, and the other is an array composed of function parameters.

var obj = { name : 'linxin'}function func(firstName, lastName){ console.log(firstName + ' ' + this.name + ' ' + lastName);}func.apply(obj, ['A', 'B']); // A linxin B

As you can see, obj is an object in the context of the function. In func, this points to the object obj. Parameters A and B are input to the func function in the array, which correspond to the list elements of the func parameter respectively.

Call ()

The first parameter of the call method is also the object used as the function context, but a list of parameters is passed in later, rather than a single array.

var obj = { name: 'linxin'}function func(firstName, lastName) { console.log(firstName + ' ' + this.name + ' ' + lastName);}func.call(obj, 'C', 'D');  // C linxin D

Compared with apply, we can see the difference. C and D are passed to the func function as separate parameters, rather than being placed in the array.

You don't need to worry about when to use it. If your parameter already exists in an array, use apply. If the parameters are scattered and there is no association between them, use call.

Usage of apply and call

1. Change this point

var obj = { name: 'linxin'}function func() { console.log(this.name);}func.call(obj);  // linxin

We know that the first parameter of the call method is the object in the context of the function. Here, obj is passed as the parameter to func, and this in the function points to the obj object. Here, the func function is actually equivalent

function func() { console.log(obj.name);}

2. Borrow methods from other objects

First look at the example

var Person1 = function () { this.name = 'linxin';}var Person2 = function () { this.getname = function () {  console.log(this.name); } Person1.call(this);}var person = new Person2();person.getname();  // linxin

From the above we can see that the person object instantiated by Person2 obtains the name in Person1 through the getname method. In Person2, the role of Person1.call (this) is to use the Person1 object instead of this object, so Person2 has all the attributes and methods in Person1, it is equivalent that Person2 inherits the attributes and methods of person1.

3. Call a function

The apply and call methods both enable immediate execution of functions, so they can also be used to call functions.

function func() { console.log('linxin');}func.call();   // linxin

Difference between call and bind

Added the bind method in Ecmascript5, which is incompatible with earlier IE versions. It is similar to call. Two parameters are accepted. The first parameter is the object used as the function context, and the second parameter is a list. Multiple parameters can be accepted.

There are two differences between them.

1. bind returns a function.

var obj = { name: 'linxin'}function func() { console.log(this.name);}var func1 = func.bind(obj);func1();      // linxin

The bind method is not executed immediately, but returns a function that changes the context of this. This in the original function func is not changed and still points to the Global Object window.

2. Use of parameters

function func(a, b, c) { console.log(a, b, c);}var func1 = func.bind(null,'linxin');func('A', 'B', 'C');   // A B Cfunc1('A', 'B', 'C');   // linxin A Bfunc1('B', 'C');    // linxin B Cfunc.call(null, 'linxin');  // linxin undefined undefined

Call refers to passing in the second and later parameters as the real parameters of the func method, while the real parameters of the func1 method are arranged based on the parameters in the bind.

In earlier browsers, there is no bind method. We can also implement one by ourselves.

If (! Function. prototype. bind) {Function. prototype. bind = function () {var self = this, // Save the original function context = []. shift. call (arguments), // Save the this context args to be bound = []. slice. call (arguments); // convert the remaining parameters to the array return function () {// return a new function self. apply (context, []. concat. call (args, []. slice. call (arguments )));}}}

The above is a detailed description of the difference between apply and call in JavaScript. For more information, see other related articles in the first PHP community!