Detailed explanation of the difference between apply and call in JavaScript

This article mainly introduces the relevant knowledge of apply and call in JavaScript. Has very good reference value. Let’s take a look at the difference between

apply and call

The ECMAscript specification defines both call and apply for all functions Methods, their applications are very wide, their functions are exactly the same, only the form of passing parameters is different.

apply( )

apply method passes in two parameters: one is the object as the function context, and the other is the object as the function parameter. Array composed of.

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 the object used as the function context, and this in the function func points to the object obj. Parameters A and B are placed in the array and passed into the func function, corresponding to the list elements of the func parameter respectively.

call( )

The first parameter of the call method is also the object of the function context, but what is passed in later is a parameter list. 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

Comparing apply, we can see the difference. C and D are passed to the func function as separate parameters instead of being placed in an array.

There is no need to worry about when to use which method. If your parameters already exist in an array, then naturally use apply. If the parameters are scattered and have no correlation with each other, use call.

Usage of apply and call

1. Change this to point to

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

We know, The first parameter of the call method is the object as the function context. Here, obj is passed to func as a parameter. At this time, this in the function points to the obj object. The func function here is actually equivalent to

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

2. Borrowing methods from other objects

Look at the example first

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 see that the object person instantiated by Person2 gets the name in Person1 through the getname method. Because in Person2, the function of Person1.call(this) is to use the Person1 object instead of this object, then Person2 has all properties and methods in Person1, which is equivalent to Person2 inheritanceThe properties and methods of Person1.

3. Calling functions

The apply and call methods will cause the function to execute immediately, so they can also be used to call functions.

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

The difference between call and bind

A method called bind has been extended in Ecmascript5, but it is not compatible with lower versions of IE. It is very similar to call. It accepts two parts of parameters. The first parameter is the object as the function context, and the second part of the parameter is a list that can accept multiple parameters.

The differences between them are the following two points.

1.bind The return value is a function

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

bind method will not be executed immediately, but will return a value after changing the context this function. However, this in the original function func has not been 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 C
func1('A', 'B', 'C');   // linxin A B
func1('B', 'C');    // linxin B C
func.call(null, 'linxin');  // linxin undefined undefined

call passes the second and subsequent parameters as actual parameters of the func method, and The actual parameters of the func1 method are actually arranged on the basis of the parameters in bind.

There is no bind method in lower version browsers, we can also implement one ourselves.

if (!Function.prototype.bind) {
 Function.prototype.bind = function () {
  var self = this,      // 保存原函数
   context = [].shift.call(arguments), // 保存需要绑定的this上下文
   args = [].slice.call(arguments); // 剩余的参数转为数组
  return function () {     // 返回一个新函数
   self.apply(context,[].concat.call(args, [].slice.call(arguments)));
  }
 }
}

The above is the detailed content of Detailed explanation of the difference between apply and call in JavaScript. For more information, please follow other related articles on the PHP Chinese website!