On the usage of call of apply of bind of in javascript

  • 2020-06-01 08:10:17
  • OfStack

call(thisObj, arg1, arg2...) , apply (thisObj, [obj1, obj2...]. ) these two methods are non-inherited methods that each function contains

call(thisobj[, args]) and apply(thisobj[, args])

The effect is 1, which simply means changing the this point in the object currently using the method. The difference between pointing to the thisObj object 2 in the calling method (the first parameter is the same) is that the parameter passed in the call method is listed by 1, while the parameter 2 in the apply method is an array

It is more intuitive to illustrate with examples:

var o={color:"blue"};
function sayColor(){
sayColor(); //red (global function, this is window ) 
sayColor.call(this);//red( call call Method specifying that the object is this Here, this is window It doesn't make any sense )
sayColor.call(window);//red( call call Method specifying that the object is window It doesn't make any sense )
sayColor.call(o); //blue ( call call Method specifying that the object is o , so this Refer to the object o So this is the original window Points to the o)
sayColor.apply(o);//blue ( call call Method specifying that the object is o , so this Refer to the object o So this is the original window Points to the o)

The bind() method in ECMAScript5 is similar to the first two methods. The bind() method creates an instance of a function whose this value is bound to the value passed to the bind() function


function a(y){
return this.x+y;
var o={x:1};
var g=a.bind(o);

You can see from the example that the function a is bound to the object o and returns the new function g. When g is called, the a function is called as a method of the object o
bind() is a method that binds a function to an object and returns a new function whose parameters are passed to the bound function.

Let's look at the differences

In JS, all three are used to change the orientation of the this object of the function. What is the difference between them?
Before saying the differences, I'd like to summarize the similarities of 1 and 3:
1. It is used to change the direction of the this object of the function.
2. The first parameter is the object to be pointed to by this.
3. All parameters can be used to pass parameters.
So what's the difference? Let's take an example.
var xw = {
name: "xiao wang",
gender: "male",
age : 24,
say : function() {
alert(this.name + ", "+ this.gender +", "this year" + this.age);
var xh = {
name: "little red",
gender: "female ",
age : 18
There is nothing to say, it must be wang, male, 24 this year.

So how do you use xw's say method to display xh data?

For call, you can do this:


For apply, you can do this:


For bind, this is required:


xw.say.bind (xh) doesn't get you anywhere. See the difference? Both call and apply are direct calls to functions, but the bind method still returns a function, so you'll need () to make the call later.
So what's the difference between call and apply? Let's rewrite our example by 1 a little bit.

        var xw = {
            name : " wang ",
            gender : " male ",
            age : 24,
            say : function(school,grade) {
                alert(this.name + " , " + this.gender + " , This year, " + this.age + " , in " + school + " on " + grade);                
        var xh = {
            name : " The little red ",
            gender : " female ",
            age : 18

It can be seen that say method has two more parameters, and we pass the parameters through call/apply.
This is true for call

xw.say.call(xh," Experimental primary school ","6 grade ");      

This is true for apply

xw.say.apply(xh,[" Experimental primary school ","6 Grade zhengzhou psoriasis hospital "]);

See the difference? The parameter after call corresponds to 11 in say method, while the second parameter of apply is an array, and the elements in the array correspond to 11 in say method, which is the biggest difference between them.
So how does bind pass arguments? It can pass arguments like call.

xw.say.bind(xh," Experimental primary school ","6 grade ")();

However, since bind still returns one function, we can pass the arguments when we call it.

xw.say.bind(xh)(" Experimental primary school ","6 grade ");

That's all for this article. I hope you enjoy it.

Related articles: