A brief discussion on the usage of call(), apply() and bind() in javascript_javascript skills

The two methods call(thisObj, arg1, arg2...) and apply(thisObj, [obj1, obj2...]) are non-inherited methods included in every function

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

The effect is the same. Simply put, it changes the this pointer in the object currently using this method to point to the thisObj object in the calling method. The difference between the two (the first parameter is the same) is that it is passed in the call method. The parameters entered are listed one by one, and the second parameter in the apply method is an array

It is more intuitive to give an example:

window.color='red';
var o={color:"blue"};
function sayColor(){
alert(this.color);
};
sayColor(); //red（全局函数，this是window）
sayColor.call(this);//red(调用call方法，指定对象是this，这里的this是window，没什么意义)
sayColor.call(window);//red(调用call方法，指定对象是window，没什么意义)
sayColor.call(o); //blue (调用call方法，指定对象是o，所以this指代对象o，这里由原来的window指向了o)
sayColor.apply(o);//blue (调用call方法，指定对象是o，所以this指代对象o，这里由原来的window指向了o)

The bind() method in ECMAScript5 is similar to the first two methods. The bind() method will create an instance of a function, and the this value of this instance will be bound to the value passed to the bind() function.

Example:

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

It can be seen from the example that function a is bound to object o and returns a new function g. When g is called, function a will be called as a method of object o
The bind() method binds a function to an object and returns a new function. All parameters passed in this new function will be passed to the bound function.

Let’s take a look at their differences

In JS, these three are used to change the pointer 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 are their differences? Let’s look at an example first.
              var xw = {
                       name: "小王",
                                                                                                                                                gender Age: 24,
Say: function() {
alert(this.name " , " this.gender " ,this year " this.age);                                                                                                        }                 }
              var xh = {
                       name: "小红",
                                                                                                                                                              gender Age: 18
                }
                    xw.say();
There is not much to say in itself. The person 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:

Copy code

The code is as follows: xw.say.call(xh);

For apply you can do this:

Copy code

The code is as follows: xw.say.apply(xh);

And for bind it needs to be like this:

Copy code

The code is as follows: xw.say.bind(xh)();

如果直接写xw.say.bind(xh)是不会有任何结果的，看到区别了吗？call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面还需要()来进行调用才可以。
那么call和apply有什么区别呢？我们把例子稍微改写一下。

        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
        }

可以看到say方法多了两个参数，我们通过call/apply的参数进行传参。
对于call来说是这样的

复制代码 代码如下:

xw.say.call(xh,"实验小学","六年级");      

而对于apply来说是这样的

复制代码 代码如下:

xw.say.apply(xh,["实验小学","六年级郑州牛皮癣医院"]);

看到区别了吗，call后面的参数与say方法中是一一对应的，而apply的第二个参数是一个数组，数组中的元素是和say方法中一一对应的，这就是两者最大的区别。
那么bind怎么传参呢？它可以像call那样传参。

复制代码 代码如下:

xw.say.bind(xh,"实验小学","六年级")();

但是由于bind返回的仍然是一个函数，所以我们还可以在调用的时候再进行传参。

复制代码 代码如下:

xw.say.bind(xh)("实验小学","六年级");

以上所述就是本文的全部内容了，希望大家能够喜欢、