Call, apply, bind

Now that we know about the different scenarios that this refers to, we know that there are cases where we need to do something special to use this reference in a particular context. For example, we often back up this reference outside the timer. Then use a reference to the external this inside the timer function. However, in fact, our JavaScript provides some function methods to help us deal more elegantly with this pointing problems inside functions. These are the call, apply, and bind methods that we’ll look at next.

call

· Parameters: The first parameter: set the reference of this. If null or undefined is specified, the internal this points to window. Other parameters: The return value of the corresponding function argument · call is the return value of the function

function fn(x,y) { console.log(this); //{name: "cc", age: 16} console.log(x+y); 11} / / var obj = {name: 'cc', age: 16} / / syntax: fn. Call (obj, 2, 9)Copy the code

application

var obj = { 0:10, 1:20, 2:30, 3:40, length:4 }; Array.prototype.push.call(obj,30) console.log(obj) //{0: 10, 1: 20, 2: 30, 3: 40, 4: 30, length: 5} Array. The prototype. The splice. Call (obj, 0, 2) the console. The log (obj) / / {0, 30, 40 1:, 2:30, length: 3}Copy the code

apply

  • Call the function and change this in the function

  • The first argument: sets the reference to this inside the function

  • The second argument is an array

    The return value of call is the return value of the function

Console. log(this) //Object console.log(x+y) //11} var obj = {name:'cc'} fn. Apply (obj,[2,9]) var arr = [1,2,3,4,5]; console.log(Math.max(arr)); //NaN console.log(Math.max.apply(Math,arr)) //5 console.log.apply(console,arr) //1 2 3 4 5Copy the code

bind

The bind() function creates a new function (called a binding function) that has the same function body (the call attribute built into the ECMAScript 5 specification) as the called function (the target function of the binding function).

This is bound to the first argument of bind() when the target function is called, which cannot be overridden. When a binding function is called, bind() also accepts the default arguments supplied to the original function.

A binding function can also use the new operator to create objects: this behavior is like treating the original function as a constructor. The supplied this value is ignored, and the arguments to the call are supplied to the mock function.

Grammar:

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

Parameters:

  • thisArg

    • This parameter is referred to as this when the binding function is called. This parameter is invalid when a binding function is called using the new operator.

  • Arg1, arg2,…

  • When the binding function is called, these arguments are passed to the bound method before the arguments.

The return value:

Returns a copy of the original function modified with the specified this value and initialization arguments.

Example 1:

this.x = 9; var module = { x: 81, getX: function() { return this.x; }}; module.getX(); // retrieveX = module.getx; retrieveX(); // Returns 9, in which case "this" refers to the global scope // creates a new function, Bind "this" to the module object // Beginners can be confused by the global x variable and the property x in the module var boundGetX = retrievex.bind (module); boundGetX(); / / back to 81Copy the code

Example 2:

function LateBloomer() { this.petalCount = Math.ceil(Math.random() * 12) + 1; } // Declare bloom after a delay of 1 second LateBloomer.prototype.bloom = function() { window.setTimeout(this.declare.bind(this), 1000); }; LateBloomer.prototype.declare = function() { console.log('I am a beautiful flower with ' + this.petalCount + ' petals! '); }; var flower = new LateBloomer(); flower.bloom(); // After one second, call the 'declare' methodCopy the code

summary

  • Call and Apply feature the same

    • Both are used to call functions, and immediately

    • However, you can specify a reference to this inside the function with the first argument at the same time you call the function

    • When a call is called, the arguments must be passed as a list of arguments, separated by commas

    • When apply calls, the parameters must be an array, and when executed, the elements inside the array are taken out one by one, passing them along with the corresponding parameters

    • If the first parameter is specified as null or undefined, the inner this points to the window

  • bind

    • Can be used to specify the pointer to this inside, and then generate a new function that changes the pointer to this

    • The biggest difference between call and apply is that bind does not call

    • Bind supports passing parameters in a special way: there are two places to pass parameters

    • Pass it as a list of arguments along with bind

    • When called, it is passed as a list of arguments

    • So which one is the argument that you pass when you bind or the argument that you pass when you call

The two are merged: the arguments passed by bind and the arguments passed by call are merged and passed inside the function

In simple terms

  • The call arguments are placed directly in, and the second, third, and NTH arguments are all comma-separated and placed directly after

  • All apply parameters must be passed in an array

  • Bind takes the same arguments as Call, except that it returns a function.

The original link: blog.csdn.net/denghuocc/a…