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

目录

一、call

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

2、可以接收任意参数

二、call、apply、bind比较

1、案例一

2、案例二

三、总结


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

一、call

代码:

javascript 复制代码
    const obj={
        uname:"pink"
    }
    function fn(){
        console.log(this)  //window
    }
    // 1. 调用函数
    fn()
    // 2. 改变 this 指向
    fn.call(obj)

打印:可以看到函数在非严格模式下this指向window, 通过call方法将this指向了obj 。

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

javascript 复制代码
    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方法,会报错

也可实现多继承

javascript 复制代码
    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需要指向的对象

javascript 复制代码
    function sayName(a,b,c){
        console.log(a,b,c)
        console.log(this)
    }
    sayName.call(undefined,1,2,3)

打印:

二、call、apply、bind比较

1、案例一

javascript 复制代码
 let obj={name:"Jack"}
   function fun01(){
       console.log(this,this.name)
   }
   fun01.call(obj)

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

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

javascript 复制代码
    let obj={name:"Jack"}
   function fun01(){
       console.log(this,this.name)
   }
   fun01.apply(obj)

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

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

javascript 复制代码
    let obj={name:"Jack"}
   function fun01(){
       console.log(this,this.name)
   }
   fun01.bind(obj)

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

2、案例二

javascript 复制代码
    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")

打印

javascript 复制代码
    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的参数是已逗号隔开的,并将这两种方法都会立即执行

javascript 复制代码
    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不会立即执行,而是返回新函数对象,需要再调用函数对象再打印

三、总结

1、call、apply、bind方法都可以改变this的指向,可以配合this使用,实现继承的效果。

2、call、apply都是调用后会立即指向的,但区别在于call传入的参数的逗号隔开的,而apply传入的参数是数组。

3、bind调用后不会立即执行函数,而是返回一个新的函数,需要调用才能执行。

相关推荐
学不会•18 分钟前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS1 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
Theodore_10221 小时前
4 设计模式原则之接口隔离原则
java·开发语言·设计模式·java-ee·接口隔离原则·javaee
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow3 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o3 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
----云烟----3 小时前
QT中QString类的各种使用
开发语言·qt
lsx2024063 小时前
SQL SELECT 语句:基础与进阶应用
开发语言
开心工作室_kaic4 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端