call()apply()和bind()的异同

Posted 2020-10-15 最爱小虾

相同点：

改变this的指向；

    var a = {
        name:"丸子",
        fn:function(){
            console.log(this.name);
        }
    }
    var b = a.fn;
    b()//undefined
    b.call(a);//丸子
    b.apply(a);//丸子
    b.bind(a);//没有被打印

 

不同点：

1，call和apply都是立即执行，而bind则是返回一个函数；

    var a = {
        name:"丸子",
        fn:function(){
            console.log(this.name);
        }
    }
    var b = a.fn;
    b.bind(a)//没有被打印

    var c = b.bind(a)
    console.log(c);
    //function (){
        //console.log(this.name);
    //}
    
    c();//丸子

 

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

    var a = {
        name:"丸子",
        fn:function(){
            console.log(this);
            //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…}
        }
    }
    var b = a.fn;
    b()//this指向的是window对象
    b.call(null);//this指向的是window对象
    b.apply(null);//this指向的是window对象
    b.bind(null)//没有被打印

 

3，参数；

(1),call和apply可以有多个参数，不同的是apply第二个参数必须是一个数组;

    var a = {
        name:"丸子",
        fn:function(m,n){
            console.log(this.name);
            console.log(m+n);
        }
    }
    var b = a.fn;
    b.call(a,6,6)
    // 丸子 
    // 12

    b.apply(a,[6,4]);
    // 丸子  
    // 10

 

(2),同样bind也可以有多个参数，并且参数可以执行的时候再次添加，但是要注意的是，参数是按照形参的顺序进行的。

    var a = {
        name:"丸子",
        fn:function(m,n){
            console.log(this.name);
            console.log(m+n);
        }
    }
    var b = a.fn;
    b.bind(a)//没有被打印

    var c = b.bind(a,2)
    console.log(c);
    //function (m,n){
        //console.log(this.name);
        //console.log(m+n);
    //}

    c(3);
    //丸子
    //5