call,apply,bind
In JavaScript, call, apply, and bind are three methods that Function objects come with to change the direction of this inside the Function body.
The first parameter of apply, call, bind is the object to which this is to point, that is, the context to be specified.
Application, call and bind can be used to transfer parameters.
bind returns the corresponding function for later invocation; apply and call are called immediately.
——————————————————————————————————————————————————————————————————————————-
Example:
1.
function fruits() {} fruits.prototype = { color: 'red', say: function() { console.log('My color is' + this.color); } } var apple = new fruits; apple.say(); // In this case, this in the method refers to fruits. // Result: My color is red
But if we have an object banana = {color:'yellow'}, we don't want to redefine the say method, so we can use the apple's say method by call or apply:
banana = { color: 'yellow' } apple.say.call(banana); //At this point this The direction has been the same. call()The method has changed, pointing to banana,this.color Namely banana.color='yellow'; //The result is My color is yellow apple.say.apply(banana);//Similarly, at this time this The direction has been the same. apply()The method has changed, pointing to banana,this.color Namely banana.color ='yellow'; //My color is yellow // If the incoming is null: apple.say.apply(null); // null yes window Next, at this time, this It's pointing. window ,however window The next is not. clolr This property, therefore this.clolr Namely window.color=undefined; //My color is undefined
2. For application and call, the function is exactly the same, but the way of accepting parameters is not the same. Call passes parameters in sequence, while apply puts parameters in arrays.
var array1 = [12,'foo',{name:'Joe'},-2458]; var array2 = ['Doe' , 555 , 100]; Array.prototype.push.call(array1, array2); // Use here call The second parameter does not array2 As an array,It's an element. //Equivalent to array1.push('''Doe' , 555 , 100''); //array1.length=5; Array.prototype.push.apply(array1, array2); // Use here apply The second parameter is an array. // Equivalent to: array1.push('Doe' , 555 , 100); //array1.length=7;
3. Class (pseudo) arrays use array methods
var divElements = document.getElementsByTagName('div'); //although divElements Yes length Attribute, but it's a pseudo-array. It can't use the methods in the array. Array.isArray(divElements);// false var domNodes = Array.prototype.slice.call(document.getElementsByTagName('div')); // Array objects Array Li this Pointing to pseudoarraysdocument.getElementsByTagName('div'),
//slice() The method returns the selected element from the existing array, without passing the parameter, returning the entire array.
Array.isArray(domNodes);// true
4. Verify that the type of an object can be used:
Object.prototype.toString.call(obj)
5. The bind() method, MDN's explanation is: the bind() method creates a new function called a binding function, when the binding function is called,
The binding function takes the first parameter of the bind() method passed in when it was created as the first parameter of this, the second parameter of the bind() method, and the subsequent reference.
The number plus the parameters of the binding function itself at run time are used as the parameters of the original function in order to call the original function.
var bar = function(){ console.log(this.x); } var foo = { x:3 } bar(); // undefined var func = bar.bind(foo); //At this point this has pointed to foo, but using the bind () method does not immediately execute, but rather creates a new function that can be called directly. bar.bind(foo)()
func(); // 3
6. In Javascript, multiple bind() is invalid. The deeper reason is that the implementation of bind() is equivalent to using a function to wrap a call / apply internally, and the second bind() is equivalent to wrapping the first bind(), so the bind after the second one cannot take effect.
var bar = function(){ console.log(this.x); } var foo = { x:3 } var sed = { x:4 } var func = bar.bind(foo).bind(sed); func(); //3 var fiv = { x:5 } var func = bar.bind(foo).bind(sed).bind(fiv); func(); //3
7. What are the similarities and differences between apply, call and bind? When to use apply, call and bind? A simple example:
var obj = { x: 81, }; var foo = { getX: function() { return this.x; } } console.log(foo.getX.bind(obj)()); //81 console.log(foo.getX.call(obj)); //81 console.log(foo.getX.apply(obj)); //81
Reference resources:
- Use Javascript to apply, call, bind
- Function.prototype.bind()
- Function.prototype.call()
- Function.prototype.apply()