call, apply, bind acquaintance

call, apply, bind a Function object carrying three methods　　

effect:

Change this points to

the return value:

call, apply immediately execute a function that returns a
bind returns a function, but also easy to be called later

use:

apply to both the identical action call, except that the received parameters are not the same manner. The call is passed sequentially into the parameter,
and apply the parameters will be placed in the array.

bind () method creates a new function, called binding function. When calling this function bindings, bind function to create when it
passed in the first parameter bind () method as this, the incoming bind () method of the second and subsequent binding function parameters plus runtime
parameters themselves to call the original function as a parameter in the order of the original function.
call (this object is to be directed (like specified context), parameter 1, parameter 2, parameter 3, parameter 4, ......, parameters n-)
Apply (this object to point (like the specified context), [parameter 1, parameter 2, parameter 3, parameter 4, ......, parameter n])

application scenarios:

JavaScript, a function of the number of parameters is not fixed, so to say if the applicable conditions, when you know the number of parameters are clear with the call.
　　When used without determining apply, and then push into the parameter passing in the array. When the number of parameter uncertainty, internal functions can also traverse all the parameters by arguments this array.

Common examples:

(A) call

　　(1): added between the array

1 var array1 = [12,'foo',{name:'Joe'},-2458];
2 var array2 = ['Doe' , 555 , 100];
3 Array.prototype.push.call(array1, array2);
4 console.log(array1) //  [12,'foo',{name:'Joe'},-2458,['Doe' , 555 , 100]]
5 console.log(array1.length) //5

 

1 var array1 = [12,'foo',{name:'Joe'},-2458];
2 var array2 = ['Doe' , 555 , 100];
3 Array.prototype.push.call(array1, ...array2);
4 console.log(array1) //[12,'foo',{name:'Joe'},-2458,'Doe' , 555 , 100]
5 console.log(array1.length)   //7

　　(2): obtaining maximum and minimum values ​​in an array

1 var  numbers = [5, 458 , 120 , -215 ]; 
2 var maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

(B) apply

　　(1): added between the array

1 var array1 = [12,'foo',{name:'Joe'},-2458];
2 var array2 = ['Doe' , 555 , 100];
3 Array.prototype.push.apply(array1, array2);
4 console.log(array1) //[12,'foo',{name:'Joe'},-2458,'Doe' , 555 , 100]
5 console.log(array1.length) //7

　　(2): obtaining maximum and minimum values ​​in an array

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

(C) bind

. 1  var bar = function () {
 2      the console.log ( the this .x);
 . 3  }
 . 4  var foo = {
 . 5      X:. 3
 . 6  }
 . 7 bar (); // undefined 
. 8  var FUNC = bar.bind (foo); 
 . 9  
10 the console.log (FUNC) // ƒ () {the console.log (in this.x);} return is a function of the body 
. 11 FUNC (); // . 3

Recommended wording:

 1 var bar = function(){
 2     console.log(this.x);
 3 }
 4 var foo = {
 5     x:3
 6 }
 7 bar(); // undefined
 8 var func = bar.bind(foo)(); 
 9 
10 console.log(func) //3

call, apply, bind all three use comparison :::

 1 var obj = {
 2   x: 81,
 3 };
 4   
 5 var foo = {
 6   getX: function() {
 7     return this.x;
 8   }
 9 }
10 console.log(foo.getX.bind(obj)());  //81
11 console.log(foo.getX.call(obj));    //81
12 console.log(foo.getX.apply(obj));   //81

Data type (D) to be verified is provided :( toString () method is not overridden)

1 Object.prototype.toString.call(obj)

(E) added: pseudo-array

　　There is an object called a pseudo-array structure in Javascript. A special feature is the arguments object, as well as calling getElementsByTagName, document.childNodes like, they return NodeList object belongs to pseudo-array. Applications can not push, pop or the like in the Array. We can Array.prototype.slice.call converted into real objects with an array length property, so domNodes on all methods under the Array can be applied.

1 function log(){
2     console.log(arguments) //Arguments(5) [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
3     var args = Array.prototype.slice.call(arguments) 
4     console.log(arguments) //Arguments(5) [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
5     args.unshift('(app)')
6     console.log.apply(console,args) //(app) 1 2 3 4 5
7 }
8 log(1,2,3,4,5)

Reference:
https://www.cnblogs.com/zhg277245485/p/6559475.html
http://www.admin10000.com/document/6711.html