call method

The call() method calls a function with a specified this value (this points to the execution environment context) and one or more parameters given separately.

grammar

fun.call(thisArg[, arg1[, arg2[, ...]]])

• fun: function called.
• thisArg: required. The value of this specified by the function runtime (this points to the execution environment context).
• arg1, arg2, ...: Optional. The specified parameter list.

Note: the specified this value is not necessarily the real this value when the function is executed. If the function is in non strict mode, the null and undefined this values will automatically point to the global object (window object in the browser), and the basic type value (number, string, Boolean) will point to the automatic wrapping object of the original value.

purpose

Use the call method to call the function, specify this, and borrow the function you don't have

function speakName() {
    console.log('My name is ' + this.name);
}

var person1 = {
    name: 'chong',
}

speakName(); // speakName is a global function, and this points to the global object window. Since the variable name does not exist in the global scope, the output: My name is
speakName.call(person1); // Output: My name is chong

Use the call method to call the parent constructor to implement inheritance

function Product(name, price) {
    this.name = name;
    this.price = price;

    if (price < 0) {
        throw RangeError(
            'Cannot create product ' + this.name + ' with a negative price'
        );
    }
}

function Food(name, price) {
    Product.call(this, name, price);
    this.category = 'food';
}

// The above Food constructor is equivalent to the following code
function Food(name, price) {
    this.name = name;
    this.price = price;

    if (price < 0) {
        throw RangeError(
            'Cannot create product ' + this.name + ' with a negative price'
        );
    }


    this.category = 'food';
}

apply method

The apply() method calls a function with a specified this value and parameters provided in the form of an array (or array like object).

grammar

func.apply(thisArg, [argsArray])

• fun: function called.
• thisArg: required. The value of this specified when the function runs.
• argsArray is optional. An array or array like object in which the array elements will be passed to the func function as separate parameters.

The purpose of the apply method is the same as that of the call method, so I won't repeat it

bind method

The bind() method is used to create a new function. The first parameter of bind() is this of the new function, and the other parameters will be the parameters of the new function.

grammar

func.bind(thisArg[, arg1[, arg2[, ...]]])

• fun: function called.
• thisArg: required. When a new function is called, it is used as the this value of the new function. If you use the new operator to construct a binding function, the value is ignored. When using bind to create a function in setTimeout (provided as a callback), any original value passed as thisArg will be converted to object. If the parameter list of bind function is empty, or thisArg is null or undefined, this of the execution scope will be regarded as thisArg of the new function.
• arg1, arg2, ...: Optional. A list of initial parameters preset for the new function.
  Return value: returns a copy of the original function with the specified this value and initial parameters.

purpose

1. Create binding function
2. Partial function: make a function have preset initial parameters

For example:

var x = 9;
var module = {
    x: 81,
    getX: function() {
        return this.x;
    },
    addX: function(n) {
        return this.x + n;
    }
};

module.getX(); // 81
module.addX(9); // 90

var _getX = module.getX;
var _addX = module.addX;
_getX(); // Return 9, because the function is invoked in the global scope.
_addX(9); // Return to 18

// Create a new function boundGetX and bind this as a module object;
var boundGetX = _getX.bind(module);
boundGetX(); // 81

// 1. Create a binding function boundAddX, bind this as a module object, and preset the parameter to 10;
var boundAddX = _addX.bind(module, 10);
// When calling a new function, you don't have to pass parameters (it's useless to pass them)
boundAddX(); // 91

// 2. Create a new function boundAddX and bind this as a module object without preset parameters;
var boundAddX = _addX.bind(module);
// You need to pass parameters when calling a new function
boundAddX(9); // 90

1. With setTimeout

By default, use window When settimeout(), this keyword will point to the window (or global) object. When this is required to point to the instance of the class in the method of the class, you may need to explicitly bind this to the callback function so that the reference of the instance will not be lost.

function LateBloomer() {
    // Petal number
    this.petalCount = Math.ceil(Math.random() * 12) + 1;
}

// After calling bloom for 1 seconds, call declare.
LateBloomer.prototype.bloom = function() {
    window.setTimeout(this.declare, 1000);
};

LateBloomer.prototype.declare = function() {
  console.log('I am a beautiful flower with ' +
    this.petalCount + ' petals!');
};

var flower = new LateBloomer();
flower.bloom();  // After a second, call the'declare'method.

summary

Comparison between call and apply

• The same point: they can call a function with a specified value of this, and can pass one or more parameters to the function. Simply put, their purpose is to call / borrow functions that an object does not have. If this function is a constructor, inheritance can be implemented.
• Difference: the only difference lies in the different forms of passing parameters. The call method passes parameters through the parameter list, and the apply method passes parameters through the array / class array.

Comparison of call, apply and bind

• The same point: they can change this when a function is executed, and can pass one or more parameters to the function.
• Difference: the bind method returns a new function, which needs to be called before execution. call and apply are executed immediately.

reference resources

• Function.prototype.call()
• Function.prototype.apply()
• Function.prototype.bind()