《前端面试题》- JS基础 - call()、apply()、bind() 的区别

call 、bind 、 apply 这三个函数的功能都是改变this的指向问题,但是也存在一定的区别。

  • call 的参数是直接放进去的,第二第三第 n 个参数全都用逗号分隔,
  • apply 的所有参数都必须放在一个数组里面传进去
  • bind 除了返回是函数以外,它 的参数和 call 一样。

对比的时候,以call为基准,call的使用方式形如:obj.say.call(objCall,'YES', 'YES');, apply与call的区别在于,传参如果有多个,只能放到数组里面;bind与call的区别在于,并不会立即执行函数,而且会返回一个新函数,可延迟执行。

为了更好的理解,写个小例子对比下使用:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media print {
            .child {
                page-break-inside: avoid; 
            }
        }
    </style>
</head>

<body>
    <div class="container"></div>
</body>
<script>
    // 这里面的say方法里面的this指向就是obj,所以调用obj.say()
    // 会输出"我的名字是:zzh, 平时爱阅读么:YES, 平时爱运动么:YES"
    const obj = {
        name: 'zzh',
        age: 18,
        say(loveRead, loveSopot) {
            console.log(`我的名字是:${this.name}, 平时爱阅读么:${loveRead}, 平时爱运动么:${loveSopot}`);
        }
    };
    obj.say('YES', 'YES');

    /**
     * call
    */
    // 这个时候,我想使用call去改变this的指向需要怎么做呢
    let objCall = { name: 'new zzh'};
    // 将obj的say方法,利用call绑定到objCall上,并且立即执行函数
    obj.say.call(objCall,'YES', 'YES'); 
    // 输出结果:我的名字是:new zzh, 平时爱阅读么:YES, 平时爱运动么:YES

    /**
     * apply, 它与call的区别就是传参如果有多个,只能使用数组,而call可以单个传递
    */
    let objApply = { name: 'new zzh with apply'};
    obj.say.apply(objApply,['YES','NO']); 
    // 输出结果:我的名字是:new zzh with apply, 平时爱阅读么:YES, 平时爱运动么:NO

    /**
     * bind, 它与call的区别就是返回了一个函数,不会立即执行函数
    */
    let objBind = { name: 'new zzh with bind'};
    // 将obj的say方法,利用call绑定到objCall上,并且立即执行函数
    let objBindNew = obj.say.bind(objCall,'NO', 'YES');
    objBindNew();
    // 输出结果:我的名字是:new zzh, 平时爱阅读么:NO, 平时爱运动么:YES

</script>

</html>
相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer084 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf4 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据5 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript