Detailed explanation of functions apply and call in JS

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( )

The apply method passes in two parameters: one is the object 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 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 instead of 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 used as the function context Object, here obj is passed to func as a parameter, and 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

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 Person2 is instantiated The object person 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 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 be executed 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

The bind method will not be executed immediately, but will return 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 Cfunc1('A', 'B', 'C');           // linxin A Bfunc1('B', 'C');                // linxin B Cfunc.call(null, 'linxin');      // linxin undefined undefined

call passes the second and subsequent parameters as actual parameters of the func method, while the actual parameters of the func1 method are actually parameters in bind. Basically, go to the back.

在低版本浏览器没有 bind 方法，我们也可以自己实现一个。

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 functions apply and call in JS. For more information, please follow other related articles on the PHP Chinese website!