Summary of the use of call, apply and bind in js

why? What do call, apply, bind do? Why learn this?

　　It is generally used to specify this environment. Before learning, there are usually these problems.

var a = {
    user: "Dream Chaser" ,
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
b(); //undefined

We want to print the user in the object a but it prints undefined. What's the matter? It is ok if we execute a.fn() directly.

var a = {
    user: "Dream Chaser" ,
    fn:function(){
        console.log(this.user);
    }
}
a.fn(); //Dream Chaser

It can be printed here because the this here points to the function a, so why doesn't the above point to a? If we need to understand the pointing problem of this, please see the point of understanding this in js thoroughly, and we don't have to recite this article.

Although this method can achieve our purpose, but sometimes we have to save this object to another variable, then we can use the following method.

1、call()

var a = {
    user: "Dream Chaser" ,
    fn:function(){
        console.log( this .user); //Dream Chaser
    }
}
var b = a.fn;
b.call(a);

By adding to the first parameter in the call method which environment to add b to, in short, this will point to that object.

The call method can add multiple parameters in addition to the first parameter, as follows:

var a = {
    user: "Dream Chaser" ,
    fn:function(e,ee){
        console.log(this.user); //追梦子
        console.log(e+ee); //3
    }
}
var b = a.fn;
b.call(a,1,2);

2、apply()

apply方法和call方法有些相似，它也可以改变this的指向

var a = {
    user:"追梦子",
    fn:function(){
        console.log(this.user); //追梦子
    }
}
var b = a.fn;
b.apply(a);

同样apply也可以有多个参数，但是不同的是，第二个参数必须是一个数组，如下：

var a = {
    user:"追梦子",
    fn:function(e,ee){
        console.log(this.user); //追梦子
        console.log(e+ee); //11
    }
}
var b = a.fn;
b.apply(a,[10,1]);

或者

var a = {
    user:"追梦子",
    fn:function(e,ee){
        console.log(this.user); //追梦子
        console.log(e+ee); //520
    }
}
var b = a.fn;
var arr = [500,20];
b.apply(a,arr);

//注意如果call和apply的第一个参数写的是null，那么this指向的是window对象

var a = {
    user:"追梦子",
    fn:function(){
        console.log(this); //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…}
    }
}
var b = a.fn;
b.apply(null);

3、bind()

bind方法和call、apply方法有些不同，但是不管怎么说它们都可以用来改变this的指向。

先来说说它们的不同吧。

var a = {
    user:"追梦子",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
b.bind(a);

我们发现代码没有被打印，对，这就是bind和call、apply方法的不同，实际上bind方法返回的是一个修改过后的函数。

var a = {
    user:"追梦子",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
var c = b.bind(a);
console.log(c); //function() { [native code] }

那么我们现在执行一下函数c看看，能不能打印出对象a里面的user

var a = {
    user:"追梦子",
    fn:function(){
        console.log(this.user); //追梦子
    }
}
var b = a.fn;
var c = b.bind(a);
c();

ok, the same bind can also have multiple parameters, and the parameters can be added again when they can be executed, but it should be noted that the parameters are in the order of the formal parameters.

var a = {
    user: " Dream Chaser " ,
    fn:function(e,d,f){
        console.log( this .user); //Dream Chaser
        console.log(e,d,f); //10 1 2
    }
}
var b = a.fn;
var c = b.bind(a, 10 );
c(1,2);

Summary: call and apply both change this in the context and execute the function immediately. The bind method allows the corresponding function to be called whenever it wants, and parameters can be added during execution. This is their difference. Choose to use according to your actual situation.

Note: The source of this article is from Mengzi's blog, and the previous article was also transferred from Mengzi to explain the problem pointed to by this.

Summary of the use of call, apply and bind in js

Guess you like