In js, the prototype of each function points to the Function.prototype object. Therefore, each function will have apply, call, and bind methods. These methods are inherited from Function and are used to change the context when the function is executed, thereby changing the function The this point in.
First look at an example
var info = {
name: "小王",
city: "黄冈",
age: 20,
say: function(hobby) {
console.log(`${this.name}, 来自${this.city}, 今年${this.age}岁了, 喜欢${hobby}`)
}
}
var info2 = {
name: "小红",
city: "黄冈",
age: 18
}
info.say('足球') // 小王, 来自黄冈, 今年20岁了, 喜欢足球
info.say.call(info2, '足球') // 小红, 来自黄冈, 今年18岁了, 喜欢足球
info.say.apply(info2, ['足球']) // 小红, 来自黄冈, 今年18岁了, 喜欢足球
info.say.bind(info2, '足球') // 无输出结果
info.say.bind(info2, '足球')() // 小红, 来自黄冈, 今年18岁了, 喜欢足球From the above example, we know that call(), apply(), and bind() all change the context of the function this.
1. Call usage
fn.call(thisArg, arg1, arg2, arg3, ...)
When fn.call is called, the this point in fn will be modified to the first parameter passed in thisArg; the following parameters will be passed to fn, and the function fn will be executed immediately.
Two, apply usage
apply(thisArg, [argsArr])
The function of fn.apply is the same as call: modify the point of this and execute fn immediately. The difference is that the form of parameter passing is different. apply accepts two parameters. The first parameter is the this object to point to, and the second parameter is an array. The elements in the array will be expanded and passed to fn as the parameter of fn.
Three, bind usage
bind(thisArg, arg1, arg2, arg3, ...)
The function of fn.bind is to only modify the this point, but not execute fn immediately; it will return a fn after modifying the this point. It needs to be called to execute: bind(thisArg, arg1, arg2, arg3, ...)() The parameter passing of bind is the same as that of call
call, apply, bind difference
The same point:
all three are used to change the direction of this;
the first parameter received is the object to be pointed to by this;
all of them can use subsequent parameters to pass parameters.
The difference:
call and bind pass the same parameters, and multiple parameters are passed in one by one;
apply has only two parameters, and the second parameter is an array; both
call and apply directly call the function, and the bind method does not call the function immediately (To be called manually, the first two are active calls), and the return is the function after modifying this.
The nature of modifying this is different:
call and apply are only temporary modifications, that is, the one of the call and apply methods; when the original function is called again, its pointing is still the original pointing.
bind is to permanently modify the this point of the function. What it modifies is not the original function; it is a new function after modification.
hint
If you have few parameters to pass, you can use fn.call(thisObj, arg1, arg2 ...)
If you have a lot of parameters to pass, you can use an array to organize the parameters and call fn.apply(thisObj, [arg1, arg2 ...])
Summarize
To sum up, the difference between call, apply and bind exists to change the context of this, so sometimes you will see such usage. In order not to change the direction of this, usually add bind(this) after the function, as follows:
function f(){}.bind(this) In this way, there will be no inexplicable this pointing problem.
In fact, since es6, arrow functions have been supported. I suggest that you use arrow functions, so that the problem of this pointing will not appear. In addition, using call and apply can also implement function inheritance. Before the es6 class appeared, it was necessary to use them to realize the inheritance relationship.