Home > Article > Web Front-end > 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(); // linxinbind 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 undefinedcall 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!