面试题解析:bind,call,apply的区别(3)

在面试的过程中,面试官很有可能会问到我们有关this的相关内容。那么关于this我们都知道在 JavaScript 中,this 是一个特殊关键字,它指向当前函数执行时的上下文对象。

this 的值取决于函数被调用的方式:

  1. 全局上下文中的 this: 当在全局作用域中使用 this 时,它将指向全局对象(在浏览器中通常是 window 对象,在 Node.js 环境中是 global 对象)。
  2. 函数中的 this: 在函数内部,this 的值取决于函数被调用的方式。
  3. 使用 callapply 或 bind 方法来显式设置函数执行时的 this 值。

bindcallapply都是JavaScript中用于处理函数调用的方法。它们的作用都是相同的而主要区别在于它们如何设置和传递函数的上下文以及参数。


bind

bind会创建一个新的函数,并将原始函数绑定到指定的上下文,以后可以进行复用。这意味着无论在什么时候调用这个新函数,它都会使用绑定的上下文。bind方法可以接收多个参数,第一个参数是要绑定的上下文对象,后面的参数是要传递给原始函数的参数。

 

javascript

复制代码

const info = { name: '张三' }; function Info(age) { console.log(`姓名: ${this.name}`); console.log(`年龄: ${age}`); } const bindInfo = Info.bind(info,'19'); bindInfo(); // 输出结果为:姓名: 张三 // 年龄: 19

在这个例子中,第8行的代码在将原始函数绑定到对象info的上下文的同时,将字符串'19'作为形参age的值传给原始函数。


call

call可以在指定的上下文中调用函数,并传递一个或多个参数。与bind不同的是,call会立即调用函数,而不是返回一个新函数,所以并不能像bind一样进行复用。call方法的第一个参数是要绑定的上下文对象,后面的参数是要传递给函数的参数。

 

javascript

复制代码

const info = { name: '张三' }; function Info(age,sex) { console.log(`姓名: ${this.name}`); console.log(`年龄: ${age}`); console.log(`性别: ${sex}`); } Info.call(info,'19','男'); // 输出结果为:姓名: 张三 // 年龄: 19 // 性别: 男

在这个例子中,第9行的代码在将原始函数绑定到对象info的上下文的同时,将字符串'19'作为形参age的值传给原始函数。


apply

apply在指定的上下文中调用函数,并传递一个数组作为参数。与call类似,apply也是立即调用函数。第一个参数是要绑定的上下文对象,但与call不同的是,apply的第二个参数是一个数组这个数组里面包含要传递给函数的参数。

 

javascript

复制代码

const info = { name: '张三' }; function Info(age,sex) { console.log(`姓名: ${this.name}`); console.log(`年龄: ${age}`); console.log(`性别: ${sex}`); } Info.apply(info,['19','男']);// 输出结果为:姓名: 张三 // 年龄: 19 // 性别: 男


总结

  • bind创建一个新函数并绑定上下文,以后可以调用。我们还可以通过bind来实现柯里化。
  • call在指定的上下文中立即调用函数,并传入参数。
  • apply在指定的上下文中立即调用函数,并传入数组作为参数。

总之,this的值在JavaScript中是动态确定的,取决于函数被调用的方式。我们需要根据不同的情况和需求来使用bind,call,apply这三种方法。

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

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

相关文章

9、jenkins微服务持续集成(一)

文章目录 一、流程说明二、源码概述三、本地部署3.1 SpringCloud微服务部署本地运行微服务本地部署微服务3.2 静态Web前端部署四、Docker快速入门一、流程说明 Jenkins+Docker+SpringCloud持续集成流程说明 大致流程说明: 开发人员每天把代码提交到Gitlab代码仓库Jenkins从G…

基于GA遗传优化的离散交通网络双层规划模型设计matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于GA遗传优化的离散交通网络双层规划模型设计.优化输出路段1和路段2的收费情况收敛过程。 2.测试软件版本以及运行结果展示 MATLAB2022a版本运行 3.核心程序…

Web前端—(原生JS)歌词滚动效果

歌词滚动效果实现 歌词滚动效果HTML部分CSS部分JS部分解析歌词字符串,得到歌词的对象数组计算在当前情况下,播放器播放到第几秒的情况创建歌词元素设置ul元素的偏移量最后对时间变化的事件进行监听完整JS代码 歌词滚动效果 实现效果如图所示&#xff1a…

可重复不限数量结构数列的演化

有一个6*6的平面,这个平面的行和列可以自由的变换,在这个平面上有一个4点结构数列 按照8,13,5,8的顺序排列。让这个数列按照4-5-4的方式演化 这个数列很快收敛,收敛顺序为13,8,8,5 8…

前端小白如何理解mvc mvp mvvm

架构、框架、设计模式是都是啥? 架构:抽象出来不同组织或者对象亦或是简单组件,根据需求和各个单元的功能,进行组合排列。 从而完成系统的运行或者是实现目标。 框架:使用什么样的规则,什么样的开发语言&…

顺序消息及代码实现

顺序消费:分区有序(不同queue之间的消息是同一topic类型,但没有联系,不同queue中的消息之间没有先后顺序,同一queue中的消息必须有先后顺序):当有多个queue参与时,实现queue的分区有…

接口自动化测试问题汇总

本篇文章分享几个接口自动化用例编写过程遇到的问题总结,希望能对初次探索接口自动化测试的小伙伴们解决问题上提供一小部分思路。 sql语句内容出现错误 空格:由于有些字段判断是变量,需要将sql拼接起来,但是在拼接字符串时没有…

npm mongoose包下载冲突解决之道

我在新电脑下载完项目代码后,运行 npm install --registryhttps://registry.npm.taobao.org 1运行就报错: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: lowcode-form-backend1.0.0 npm …

Python | 单变量时间序列分析与预测

时间序列数据是机器学习中最具挑战性的任务之一,也是与数据相关的现实问题之一,因为数据实体不仅取决于物理因素,而且主要取决于它们发生的时间顺序。我们可以基于一个单变量特征和两个双变量或多变量特征来预测时间序列中的目标值&#xff0…

合集:JS异步的六个解决方案详解。

Hello,各位老铁,最近发表了js异步的解决方案,是分开发的,这次我把他汇总起来,方便大家收藏、查看,欢迎点赞评论私信交流。 01.详解:JS异步解决方案之回调函数,及其弊端 02.详解&…

全套医院手术麻醉系统源码 人工智能麻醉系统源码 医疗管理系统源码

全套医院手术麻醉系统源码 人工智能麻醉系统源码 医疗管理系统源码 手术麻醉临床信息系统有着完善的临床业务功能,能够涵盖整个围术期的工作,能够采集、汇总、存储、处理、展现所有的临床诊疗资料。通过该系统的实施,能够规范麻醉科的工作流…

【LV16 day2 平台总线驱动开发---名称匹配】

一、总线、设备、驱动 硬编码式的驱动开发带来的问题: 垃圾代码太多结构不清晰一些统一设备功能难以支持开发效率低下 1.1 初期解决思路:设备和驱动分离 ​ struct device来表示一个具体设备,主要提供具体设备相关的资源(如寄…

[深度学习]yolov8+pyqt5搭建精美界面GUI设计源码实现二

【简单介绍】 基于目标检测算法YOLOv8和灵活的PyQt5界面开发框架,我们精心打造了一款集直观性、易用性和功能性于一体的目标检测GUI界面。通过深度整合YOLOv8在目标识别上的卓越能力与PyQt5的精致界面设计,我们成功研发出一款既高效又稳定的软件GUI。 …

java全排列(力扣Leetcode46)

全排列 力扣原题链接 问题描述 给定一个不含重复数字的数组 nums,返回其所有可能的全排列。你可以按任意顺序返回答案。 示例 示例 1: 输入:nums [1,2,3] 输出:[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]] 示例 2…

GIT新建远程分支的操作过程

创建一个新的分支:git branch 新分支名 (创建并立即切换到新分支:git checkout -b 新分支名) (创建) (所创建的新分支的代码和当前分支代码相同,会显示远程Git仓库的地址&#xff09…

OpenHarmony error: signature verification failed due to not trusted app source

问题:error: signature verification failed due to not trusted app source 今天在做OpenHarmony App开发,之前一直用的设备A在测试开效果,今天换成了设备B,通过DevEco Studio安装应用程序的时候,就出现错误&#xf…

gpt 3d三角形 重心坐标填充 沿x轴炫赵师傅

go import pygame from pygame.locals import * import sys import math# 初始化Pygame pygame.init()# 设置窗口大小 width, height 800, 600 screen pygame.display.set_mode((width, height)) pygame.display.set_caption(3D Triangle Fill with Barycentric Coordinates)…

Windows 远程访问 Ubuntu Desktop - 虚拟网络控制台 (Virtual Network Console,VNC)

Windows 远程访问 Ubuntu Desktop - 虚拟网络控制台 [Virtual Network Console,VNC] References 1. Desktop Sharing 2. Desktop Sharing Preferences 勾选 允许其他人查看您的桌面 勾选 要求远程用户输入此密码 取消勾选 必须为对本机器的每次访问进行确定 3. 虚拟…

Java通过反射机制获取类对象下的属性值

目录 以类USER为例: 使用Java的反射机制获取Column的name为“user_name”的类属性值 以类USER为例: import lombok.Data; import javax.persistence.*; import java.io.Serializable;Data Table(name "user_info") public class User imple…

vue3+vite 模板vue3-element-admin框架如何关闭当前页面跳转 tabs

使用模版: 有来开源组织 / vue3-element-admin 需要关闭的.vue 页面增加以下方法 //setup 里import {LocationQuery, useRoute, useRouter} from "vue-router"; const router useRouter(); function close() {console.log(|--router.currentRoute.value, router.cur…