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

news2024/12/23 16:05:20

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>
5d5e02e94006892c2659449f0cd111a4.png

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1581610.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Training - 使用 WandB 配置 可视化 模型训练参数

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/137529140 WandB (Weights&Biases) 是轻量级的在线模型训练可视化工具&#xff0c;类似于 TensorBoard&#xff0c;可以帮助用户跟踪…

js语法---简单理解promise

promise语法结构 创建一个promise对象 let p new Promise(function(resolve,reject){// 执行的操作...// 判断操作的结果并执行对应的回调函数if(){resolve()}else{reject()} } 以上实例化了一个promise对象&#xff0c;其中包含了一个参数function&#xff0c;这个函数会在…

【配电网故障定位】基于二进制粒子群算法的配电网故障定位 12节点配电系统故障定位【Matlab代码#76】

文章目录 【获取资源请见文章第5节&#xff1a;资源获取】1. 配电网故障定位2. 二进制粒子群算法3. 部分代码展示4. 仿真结果展示5. 资源获取 【获取资源请见文章第5节&#xff1a;资源获取】 1. 配电网故障定位 配电系统故障定位&#xff0c;即在配电网络发生故障的时候&…

了解Vue中的 computed 计算属性

目录 1. computed计算属性介绍和基础语法 1.1. 概念 1.2. 语法 2. “计算属性”和“方法”的对比 2.1. computed 计算属性 2.1.1. 作用 2.1.2. 语法 2.2. methods 方法 2.2.1. 作用 2.2.2. 语法 2.2.3. 缓存特性&#xff08;提升性能&#xff09; 3. computed 计算…

ssm“最多跑一次”微信小程序

采用技术 ssm“最多跑一次”微信小程序的设计与实现~ 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringMVCMyBatis 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统实现的功能 本次设计任务是要设计一个“最多跑一次”微信小程序&#xff0c;…

AI大模型日报#0409:Llama 3下周发布、特斯联20亿融资、Karpathy新项目

导读&#xff1a; 欢迎阅读《AI大模型日报》&#xff0c;内容基于Python爬虫和LLM自动生成。目前采用“文心一言”生成了每条资讯的摘要。标题: 120亿Stable LM 2上线即开源&#xff01;2万亿token训练&#xff0c;碾压Llama 2 70B 摘要: Stable LM 2 12B参数版本发布&#x…

OpenMesh 计算网格顶点Voronoi面积

文章目录 一、简介二、实现代码三、实现代码参考资料一、简介 在计算离散的微分算子时(如拉普拉斯算子、高斯曲率等),总是会需要计算某个网格顶点的局部面积,主要有以下几种: 该操作类似于点云中的邻域操作,只不过点云的邻域一般是基于一个圆或者一个圆柱,而这里则是某个…

VSCode+Cmake 调试时向目标传递参数

我有一个遍历文件层次结构的程序&#xff0c;程序根据传入的文件路径&#xff0c;对该路径下的所有文件进行遍历。这个程序生成一个名为 ftw 的可执行文件&#xff0c;如果我要遍历 /bin 目录&#xff0c;用法为&#xff1a; ftw /bin问题是&#xff0c;如果我想单步跟踪&…

vue将html生成pdf并分页

jspdf html2canvas 此方案有很多的css兼容问题&#xff0c;比如虚线边框、svg、页数多了内容显示不全、部分浏览器兼容问题&#xff0c;光是解决这些问题就耗费了我不少岁月和精力 后面了解到新的技术方案&#xff1a; jspdf html-to-image npm install --save html-to-i…

Linux查看系统配置信息的命令【lscpu】【free】【df】【uname】【lsblk】

目录 1.查看CPU信息【lscpu】 2.查看内存信息【free】 3.查看文件系统信息【df】 4.查看系统信息【uname】 知识扩展&#xff1a;Red Hat Enterprise Linux 和 Debian GNU/Linux 两者的发展介绍 知识扩展&#xff1a;Centos 和 ubuntu的区别 知识扩展&#xff1a;更多 …

Jenkins使用-绑定域控与用户授权

一、Jenkins安装完成后&#xff0c;企业中使用&#xff0c;首先需要绑定域控以方便管理。 操作方法&#xff1a; 1、备份配置文件&#xff0c;防止域控绑定错误或授权策略选择不对&#xff0c;造成没办法登录&#xff0c;或登录后没有权限操作。 [roottest jenkins]# mkdir ba…

最短编辑距离(线性dp)-java

最短编辑问题也是一种非常经典的二维线性dp问题。 文章目录 前言 一、最短编辑距离问题 二、算法思路 1.dp[i][j]的情况 2.边界问题初始化 3.状态转移方程 三、代码如下 1.代码如下 2.读入数据 3.代码运行结果 总结 前言 最短编辑问题也是一种非常经典的二维线性dp问题。 提示&…

NzN的数据结构--插入排序

排序排序我要Disney&#xff0c;今天我们先来看看经典排序算法里的插入排序&#xff0c;先三连后看才是好习惯&#xff01;&#xff01;&#xff01; 目录 一、排序的概念及应用 1. 排序的概念 2. 排序的应用 3. 常见的排序算法 二、插入排序 1. 基本思想 2. 直接插入排…

算法打卡day40|动态规划篇08| Leetcode 139.单词拆分|多重背包理论|背包问题总结篇

目录 算法题 Leetcode 139.单词拆分 个人思路 解法 动态规划 回溯法 多重背包理论基础 背包问题总结篇 解题思路 背包递推公式 遍历顺序 01背包 完全背包 算法题 Leetcode 139.单词拆分 题目链接:139.单词拆分 大佬视频讲解&#xff1a;单词拆分视频讲解 个人思…

使用pytorch构建控制生成GAN(Controllable GAN)网络模型

本文为此系列的第四篇Controllable GAN&#xff0c;上一篇为Conditional GAN。文中使用训练好的模型和优化噪声向量来操纵生成图像的特定属性&#xff0c;若有不懂的无监督知识点可以看本系列第一篇。 原理 本文主要讲什么是控制生成&#xff0c;以及如何做到控制生成。 什么是…

华为S5735S核心交换配置实例

以下脚本实现创建vlan2,3&#xff0c;IP划分&#xff0c;DHCP启用&#xff0c;接口划分&#xff0c;ssh,telnet,http,远程登录启用 默认用户创建admin/admin123提示首次登录需要更改用户密码 sysname test-Hxvlan 2 description to test1…

JavaScript(1)神秘的编程技巧

大家都感兴趣的箭头函数 箭头函数在许多场景中都可以发挥作用&#xff0c;尤其适用于简化函数声明和提高代码的可读性。以下是箭头函数可以使用的一些常见方面&#xff1a; &#xff08;1&#xff09;回调函数&#xff1a; 箭头函数特别适合作为回调函数&#xff0c;例如在事…

html基础(2)(链接、图像、表格、列表、id、块)

1、链接 <a href"https://www.example.com" target"_blank" title"Example Link">Click here</a> 在上示例中&#xff0c;定义了一个链接&#xff0c;在网页中显示为Click here&#xff0c;鼠标悬停指示为Example Link&#xff0c…

电脑开机提示“no bootable device”,无法进入系统

当您的Windows 10电脑开机时提示“no bootable device”,这意味着计算机无法找到一个可以启动操作系统的设备。这个问题通常与硬件连接、BIOS设置、硬盘问题、引导扇区故障或系统文件损坏等有关。以下是一系列详细的解决步骤: 检查硬件连接:关闭电脑,拔掉电源线,打开机箱检…

Android OOM问题定位、内存优化

一、常用工具&#xff1a; 1、LeakCanary val refWatcher: RefWatcher? TestApp.getRefWatcher(activity) refWatcher?.watch(activity);//检测是否有泄露&#xff0c;即触发GC回收&#xff0c;看activity是否被回收&#xff0c;没有被回收就是泄露了。 二、常见的几种内…