Home  >  Article  >  Web Front-end  >  Differences in the use of apply, call and bind in javascript_Basic knowledge

Differences in the use of apply, call and bind in javascript_Basic knowledge

WBOY
WBOYOriginal
2016-05-16 15:06:351556browse

In JS, these three are used to change the point of the this object of the function. What are the differences between them.

Before talking about the differences, let’s summarize the similarities between the three:

1. They are all used to change the point of the this object of the function.

2. The first parameter is the object to which this points.

3. You can use subsequent parameters to pass parameters.

So what’s the difference between them? Let’s look at an example first.

        var xw = {
            name : "小王",
            gender : "男",
            age : 24,
            say : function() {
                alert(this.name + " , " + this.gender + " ,今年" + this.age);                
            }
        }
        var xh = {
            name : "小红",
            gender : "女",
            age : 18
        }
        xw.say();

There is nothing much to say in itself. The one shown must be Xiao Wang, male, 24 this year.
So how to use the say method of xw to display the data of xh.
For call, you can do this:

1.xw.say.call(xh);

For apply you can do this:

1.xw.say.apply(xh);

And for bind it needs to be like this:

1.xw.say.bind(xh)();

If you write xw.say.bind(xh) directly, there will be no results. Do you see the difference? Both call and apply are direct calls to functions, and the bind method still returns a function, so you need () to call it later.
So what is the difference between call and apply? Let's rewrite the example a little bit.

        var xw = {
            name : "小王",
            gender : "男",
            age : 24,
            say : function(school,grade) {
                alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);                
            }
        }
        var xh = {
            name : "小红",
            gender : "女",
            age : 18
        }

You can see that the say method has two more parameters. We pass the parameters through the call/apply parameters.
This is the case for call

1.xw.say.call(xh,"Experimental Primary School","Sixth Grade"); 

And for apply it is like this

1.xw.say.apply(xh,["Experimental Primary School","Sixth Grade"]);

Do you see the difference? The parameters after call correspond one-to-one with the say method, while the second parameter of apply is an array. The elements in the array correspond one-to-one with the say method. This is The biggest difference between the two.

So how does bind pass parameters? It can pass parameters like call.

1.xw.say.bind(xh,"Experimental Primary School","Sixth Grade")();

But since bind still returns a function, we can also pass parameters when calling.

1.xw.say.bind(xh)("Experimental Primary School","Sixth Grade");

The differences in the use of apply, call and bind in the above javascript are all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn