前端 call、bind、apply的实际使用

一、call

1、继承的子类可以使用父类的方法

2、可以接收任意参数

二、call、apply、bind比较

1、案例一

2、案例二

三、总结

这个三个方法都是改变函数的this指向的方法。

一、call

1、继承的子类可以使用父类的方法

    function Animal(){
        //this 指向小cat
        this.eat=function (){
            console.log("吃东西")
        }
    }

    function Cat(){
        //this指向小cat
        Animal.call(this)  //key words
    }

    let cat = new Cat();
    cat.eat()

终端打印：若没有Animal.call(this) 将Cat中的this指向Animal，cat对象也不会有eat方法，会报错

也可实现多继承

    function Animal(){
        this.eat=function (){
            console.log("吃东西")
        }
    }

    function Bird(){
        this.fly=function (){
            console.log("飞翔")
        }
    }

    function Cat(){
        Animal.call(this)
        Bird.call(this)
    }

    let cat = new Cat();
    cat.eat()
    cat.fly()

打印如下：

2、可以接收任意参数

第一个参数就是我们函数中的this需要指向的对象

    function sayName(a,b,c){
        console.log(a,b,c)
        console.log(this)
    }
    sayName.call(undefined,1,2,3)

打印：

二、call、apply、bind比较

1、案例一

 let obj={name:"Jack"}
   function fun01(){
       console.log(this,this.name)
   }
   fun01.call(obj)

打印：可以看到，调用fun01调用call以后fun01的this就指向了obj的this，调用this的属性时也调用的是obj的了。

类似地，我们将call换成apply,

    let obj={name:"Jack"}
   function fun01(){
       console.log(this,this.name)
   }
   fun01.apply(obj)

打印：这里和call效果一样，都立即执行了。

再换成bind，并没有立即执行

    let obj={name:"Jack"}
   function fun01(){
       console.log(this,this.name)
   }
   fun01.bind(obj)

案例一，我们可以得出，call和apply都是立即执行的，而bind并不会调用立即执行。

2、案例二

    let obj={name:"Jack"}
   function fun01(age,sex){
       this.age=age
       this.sex=sex
       console.log(this,this.name,this.age,this.sex)
   }
   fun01.call(obj,18,"female")

打印

    let obj={name:"Jack"}
   function fun01(age,sex){
       this.age=age
       this.sex=sex
       console.log(this,this.name,this.age,this.sex)
   }
   fun01.apply(obj,[18,"female"])

打印：这里可以看到call和apply效果相同，传入参数不同，apply传人的参数是数组，而call的参数是已逗号隔开的，并将这两种方法都会立即执行

    let obj={name:"Jack"}
   function fun01(age,sex){
       this.age=age
       this.sex=sex
       console.log(this,this.name,this.age,this.sex)
   }
   console.log(fun01.bind(obj,18,"female"))
   fun01.bind(obj,18,"female")()

打印：bind不会立即执行，而是返回新函数对象，需要再调用函数对象再打印。