A deep understanding of the difference _javascript skills of call, apply, and bind methods in JavaScript

In JavaScript, the point of this is dynamic, and it is possible to accidentally break this point in the process of writing a program, so we need a technique that can fix the meaning of this, so we have the three methods of call,apply and bind, To change the point of this inside the function body, because the function has the concept of "definition-time context" and "Run-time context" and "context can be changed"

Apply, call

Apply: Use one of the methods of an object to replace the current object with another object

Call: Invokes one method of an object, replacing 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
/I am a Girl 

Change Point

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
//I am a girl//I am m/
I am a boy 

The Common place

can be used instead of another object to invoke a method that changes the object context of a function from the initial context to the new object specified by Thisobj.

The difference

1, apply: can only have two parameters-the new this object and an array Argarray. If you pass multiple arguments to the method, the arguments are written into the array, and of course, even if there is only one argument, it is written into the array. If Argarray is not a valid array or is not a arguments object, it will result in a typeerror. If you do not supply any of the Argarray and thisobj parameters, the Global object will be used as a thisobj and cannot be passed any parameters.

Fun.call (thisarg[, arg1[, arg2[, ...)
 
]] function f (x,y) {
 console.log (x+y);
}
F.call (NULL, 1, 1)
//return 2 

2, call: is a direct parameter list, mainly used in the JS object when each method calls each other, so that the current instance pointer is consistent, or in special circumstances need to change the this pointer. If the thisobj parameter is not supplied, the Global object is used as a thisobj.

Fun.apply (Thisarg, [argsarray])
 
function f (x,y) {
 console.log (x+y);
}
F.call (null, [1,1])
//return 2 

Apply and call functions, just the incoming argument list in a different form, where Thisarg is the context you want to specify, he can be any JavaScript object (everything in JavaScript), calls need to pass the parameters in order, and apply is to put the parameters in the array.

If the number of arguments for a function is not fixed, use call when your argument is explicitly aware of the quantity, apply when you are unsure, and then push the arguments into the array to pass in. When the number of parameters is indeterminate, the function can also traverse all the arguments by arguments this array, and we'll look at some usage

Code A

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

Code two

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

Code Three

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

Bind

Fun.bind (thisarg[, arg1[, arg2[, ...)]] 

Unlike the above, BIND returns a new function that changes this point, noting that the new function is not the same memory address used before, so when you need to reuse the function, you have to save it to a variable for next call. All two of the above functions are the result of the return execution, that is, the invocation that holds the

Line, in addition, the other thing to note is that the first parameter in the BIND function automatically becomes the default value of the parameter in the new function, so when you call it, you only need to give the remaining parameters except for 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 function
new_f (1)
//return 2 

It should be explained that the Thisarg parameters in all of the sample code above are substituted with NULL, and null and undefined under this point is a global object without giving the specified Thisarg object, that is, the JS Code execution Environment

Apply, call, bind comparison

var obj = {bar: ' Oops, this was 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); 

The difference is that the bind () method is used when you want to change the context, not immediately, but when the callback executes. and Apply/call immediately executes the function

Apply, call, and bind are all used to change the point of the This object of the function;
apply, call, bind the first argument is the object to which this is to be specified, which is the context to specify;
apply, call, bind All three can use subsequent parameters to pass the parameter;
bind returns the corresponding function for later invocation; apply, call is called immediately 

The above in-depth understanding of the JavaScript in the call, apply, bind method is the difference is small series to share all the content of everyone, hope to give you a reference, but also hope that we support cloud habitat community.