Detailed explanation of usage examples of the difference between apply and call, call and bind in JavaScript

The difference between apply and call

The ECMAScript specification defines two methods, call and apply, for all functions. They are widely used and their functions are exactly the same, except for passing parameters. The form is just 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 that 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. Borrow methods from other objects

Let’s 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 can 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 the this object, then Person2 has all the properties and methods in Person1, which is equivalent to Person2 inheriting the 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

The method called bind is extended in EcmaScript5, but it is not available in lower versions of IE. compatible. 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. The return value of bind is the 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 It returns a function that changes the context this. 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 uses the second and subsequent parameters as The actual parameters of the func method are passed in, while the actual parameters of the func1 method are arranged based on 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 usage examples of the difference between apply and call, call and bind in JavaScript. For more information, please follow other related articles on the PHP Chinese website!