In JavaScript, this direction is dynamic, it is possible to write a program, inadvertently destroy the point of this, so we need a technology that can be fixed the meaning of this, so there are call,apply and bind these three methods, To change the direction of this within the function body, because the function has the concept of "context at definition" and "runtime context" and "context can be changed."
Apply, call
Apply: Apply one method 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
123456789101112131415 |
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 Point
1234567891011121314151617181920 |
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
|
The common point
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: There can be up to two parameters--the new this object and an array of 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 none of the Argarray and Thisobj parameters are provided, then the Global object is used as a thisobj and cannot be passed any parameters.
1234567 |
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 each method calls each other, so that the current this instance pointer is consistent, or in special cases need to change the this pointer. If the Thisobj parameter is not provided, then the Global object is used as the thisobj.
1234567 |
fun.apply(thisArg, [argsArray]) function f(x,y){ console.log(x+y); } f.call(null, [1,1]) //return 2 |
Apply and call function, just pass in the form of the parameter list, where Thisarg is the context you want to specify, he can be any JavaScript object (everything in JavaScript object), call needs to pass parameters in order, and apply The parameter is placed in the array.
If the number of arguments to a function is not fixed, use call when your parameter is explicitly known, and use apply when unsure, and then pass the parameter push into the array. When the number of arguments is indeterminate, the inside of the function can also traverse all the arguments by arguments the array, so let's take a look at some usage
Code One
12345 |
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
123 |
var numbers = [5, 458 , 120 , -215 ]; Math.max.apply( null ,numbers); //458 |
Code Three
1234567 |
log ( "foo" "Joe" }, -2458); function log () {    var args = Array.prototype.slice.call (arguments);    args.unshift (    console.log.apply (console, args); }; //(APP) foo Object {name: "Joe"} -2458 |
Bind
1 |
fun.bind(thisArg[, arg1[, arg2[, ...]]]) |
Unlike the above, BIND returns a new function that changes this point, note that the new function is highlighted here, and it is not the same block memory address used previously, so when you need to reuse the function, you have to save it to a variable for the next call. The above two functions are the result of the execution of the return, that is, the call
Line, in addition, it is important to note that the first parameter in the BIND function will automatically become the default value of the parameter returned in the new function, then the formal invocation, only need to give the first parameter, except the remaining parameters.
12345678 |
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 stated that the Thisarg parameter in all the sample code above is replaced with NULL, in the case where the specified Thisarg object is not given, null and undefined under this point is the global object, that is, the JS Code execution Environment
Refer to the use and implementation of the bind () method in JavaScript
Apply, call, bind comparison
123456789101112131415 |
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);
|
To see the difference is not, the difference is that when you want to change the context is not immediately after the execution, but the callback execution, the use of the bind () method. and Apply/call immediately executes the function.
1234 |
apply 、 call 、bind 三者都是用来改变函数的 this 对象的指向的; apply 、 call 、bind 三者第一个参数都是 this 要指向的对象,也就是想指定的上下文; apply 、 call 、bind 三者都可以利用后续参数传参; bind是返回对应函数,便于稍后调用;apply、call则是立即调用 |
The difference between the call, apply, and bind methods in JavaScript