Deeply understand the differences between call, apply, and bind methods in JavaScript

In JavaScript, this pointing is dynamically changed, and it is very likely that this pointing is accidentally destroyed during the process of writing a program. Therefore, we need a technology that can fix the meaning of this, so we have three methods: call, apply and bind to change the pointing of this inside the function body, because the function has the concepts of "definition context", "runtime context" and "context can be changed"

apply, call

apply: apply one method of a certain object and replace the current object with another object

call: Call a method of an object to replace the current object with another object

 function person() {} person.prototype = { attr: {age:18,sex:'girl'}, say: function() { console.log("My age is " + this.attr.age); console.log("I am a " + this.attr.sex); }} var Marry = new person();Marry.say(); // My age is 18// I am a girl

Change the direction

 function person() {} person.prototype = { attr: {age:18,sex:'girl'}, say: function() { console.log("My age is " + this.attr.age); console.log("I am a " + this.attr.sex); }} xiaoming ={ attr : {age:20,sex:'boy'} }; var Marry = new person();Marry.say(); Marry.say.call(xiaoming);// My age is 18// I am a girl// My age is 20// I am a boy

What's common

Both can be used to call a method instead of another object, changing the object context of a function from the initial context to the new object specified by thisObj.

The difference

1. apply: There can only be two parameters at most - the new this object and an array argArray. If you pass multiple parameters to this method, then write all the parameters into this array. Of course, even if there is only one parameter, it must be written into the array. If argArray is not a valid array or is not an arguments object, a TypeError will be generated. If no arguments are provided, the Global object will be used as thisObj and cannot be passed any arguments.

 fun.call(thisArg[, arg1[, arg2[, ...]]]) function f(x,y){ console.log(x+y);}f.call(null, 1, 1)//return 2

2. Call: It is a direct parameter list, which is mainly used when various methods of the js object are called to each other, so that the current pointer remains consistent, or in special cases, this pointer needs to be changed. If thisObj parameter is not provided, the Global object is used as thisObj.

 fun.apply(thisArg, [argsArray]) function f(x,y){ console.log(x+y);}f.call(null, [1,1])//return 2

apply is the same as call function, except that the incoming parameter list is different in form. ThisArg is the context you want to specify. It can be any JavaScript object (everything in JavaScript is an object). Call needs to pass parameters in order, while apply puts parameters in an array.

If the number of parameters of a function is not fixed, use call when your parameters clearly know the quantity, and use apply when it is uncertain, and then push the parameter into the array and pass it in. When the number of parameters is uncertain, the function can also traverse all parameters through the arguments array. Let's take a look at some usage

Code 1

 var array1 = [12 , "foo" , {name:"Joe"} , -2458];var array2 = ["Doe" , 555 , 100];Array.prototype.push.apply(array1, array2);console.log(array1);//[12, "foo", Object, -2458, "Doe", 555, 100]

Code Two

 var numbers = [5, 458 , 120 , -215 ];Math.max.apply(null,numbers);//458

Code Three

 log(12 , "foo" , {name:"Joe"} , -2458);function log(){ var args = Array.prototype.slice.call(arguments); args.unshift('(app)'); console.log.apply(console, args);};// (app) 12 foo Object {name: "Joe"} -2458

bind

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

Unlike the above, bind will return a new function that changes this pointing. Note that the new function is emphasized here, which is not the same memory address as the one used before, so when you need to reuse this function, you have to save it to a variable to facilitate the next call. The above two functions are the execution results returned, that is, the call is executed.

Row, in addition, another thing to note is that the first parameter in the bind function will automatically become the default value for returning the parameters in the new function. Then when the official call is called, you only need to give the remaining parameters except the first parameter.

 function f(x,y){ console.log(x+y);}f.call(null, [1,1])var new_f = f.bind(null,1,1)//return new functionnew_f(1)//return 2

It should be noted that the thisArg parameter in all the above example codes is replaced by null. When thisArg object is not specified, this pointing is a global object under null and undefined, that is, the js code execution environment

apply, call, bind comparison

 var obj = {bar: 'Oops , this is a bad idea' }; var foo = { get: function() { return this.bar; }} var bind = foo.get.bind(obj) ,call = foo.get.call(obj) ,apply = foo.get.apply(obj); console.log(bind(),call,apply); console.log(bind,call,apply); console.log(typeof bind,typeof call,typeof apply); console.log(typeof bind(),typeof call,typeof apply);

I see no difference. The difference is that when you want to change the context, it is not executed immediately, but the callback is executed, use the bind() method. apply/call will execute the function immediately

 apply , call , bind are all used to change the pointing of this object of the function; the first parameters of apply , call , bind are all objects to which this should point, that is, the context to be specified; apply , call , bind can all use subsequent parameters to pass parameters; bind returns the corresponding function, which is convenient for calling later; apply , call is called immediately

The above article deeply understands the difference between calling, apply, and bind methods in JavaScript is all the content I share with you. I hope it can give you a reference and I hope you can support Wulin.com more.