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

在面试的过程中,面试官很有可能会问到我们有关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/775773.shtml

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

相关文章

语音陪玩交友软件系统程序-app小程序H5三端源码交付,支持二开!

电竞行业的发展带动其周边产业的发展,绘制着游戏人物图画的抱枕、鼠标垫、海报销量极大,电竞游戏直播、游戏教程短视频也备受人们喜爱,自然,像游戏陪练、代练行业也随之生长起来,本文就来讲讲,从软件开发角…

【字节二面】SpringBoot可以同时处理多少请求

目录 一、示例代码二、那么springboot可以处理多少请求?三、maxConnections、maxThreads、acceptCount的关系 一、示例代码 RestController Slf4j public class RequestController {GetMapping("/test")public String test(HttpServletRequest request) …

mysql_数据_增删改查

DML(数据操作语言) 添加数据 指定字段:INSERT INTO 表名 (字段名1, 字段名2, ...) VALUES (值1, 值2, ...); 全部字段:INSERT INTO 表名 VALUES (值1, 值2, ...); 批量添加数据:INSERT INTO 表名 (字段名1, 字段名2…

vscode ai插件“通义灵码”

文章目录 vscode ai插件“通义灵码”为什么安装?官网主要功能 vscode ai插件“通义灵码” 为什么安装? 通义灵码,是阿里云出品的一款基于通义大模型的智能编码辅助工具,提供行级/函数级实时续写、自然语言生成代码、单元测试生成…

腾讯放大招了!AniPortrait开源上线!音频驱动逼真人像动画合成!人人都是歌手!

文章链接:https://arxiv.org/pdf/2403.17694 github链接:https://github.com/Zejun-Yang/AniPortrait 本文提出了AniPortrait,一个新颖的框架,用于生成由音频和参考肖像驱动的高质量动画。方法分为两个阶段。首先,从音…

linux i2c-tools使用总结

1,安装iic-tools sudo apt install i2c-tools -y 2,查看有几条iic总线 [root@sino-platform:/root]# ls /dev/i2c- i2c-0 i2c-1 i2c-2 i2c-3 3,查看i2c命令 [root@sino-platform:/root]# i2c i2cdetect i2cdump i2cget i2cset 4,iic-help命令 [root@sino-platform…

P1093 [NOIP2007 普及组] 奖学金 Python 列表中的字典元素

[NOIP2007 普及组] 奖学金 题目背景 NOIP2007 普及组 T1 题目描述 某小学最近得到了一笔赞助,打算拿出其中一部分为学习成绩优秀的前 5 5 5 名学生发奖学金。期末,每个学生都有 3 3 3 门课的成绩:语文、数学、英语。先按总分从高到低排…

【vue3学习笔记(二)】(第141-143节)初识setup;ref函数_处理基本类型;ref函数_处理对象类型

尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 本篇内容对应课程第141-143节 课程 P141节 《初识setup》笔记 1、setup是所有组合式API“表演的舞台”,组件中所用到的所有数据、方法、监视数据、生命周期钩子等都需要配置在setup中。 2、setup的两种返回值&…

深入解析Oracle数据库ORA-01427错误:单行子查询返回多行的问题与解决办法

深入解析Oracle数据库ORA-01427错误:单行子查询返回多行的问题与解决办法 1、引言2、错误描述3、常见场景与示例4、解决方案5、声明 1、引言 在Oracle数据库日常运维与开发过程中,经常会遇到ORA-01427错误,这是一个很典型的数据库错误提示&am…

maya 导入导出anim脚本

目录 maya导入anim文件 测试ok maya导入anim文件,mel命令 maya导出anim文件 mel脚本 测试ok maya导出anim文件 python脚本 测试ok

Go语言介绍以及如何在Go语言中操作MySQL数据库

人不走空 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 目录 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌…

「Nginx」Nginx配置详解

「Nginx」Nginx配置详解 参考文章1、正向代理和方向代理2、指定域名允许跨域 参考文章 1、Nginx反向代理 2、nginx配置详解 3、Nginx服务器之负载均衡策略(6种) 1、正向代理和方向代理 2、指定域名允许跨域 map $http_origin $allow_cors {default 1;…

uniApp使用XR-Frame创建3D场景(6)播放模型动画

上篇文章讲述了如何将XR-Frame作为子组件集成到uniApp中使用 这篇我们讲解播放模型动画 先看源码 <xr-scene render-system"alpha:true" bind:ready"handleReady"> <xr-node visible"{{sec6}}"><xr-light type"ambient&qu…

【Qt学习】了解Qt文件系统 + 利用QFile类实现记事本功能

文章目录 1. 前言 - 关于Qt文件1.1 QIODevice 介绍1.2 QFile 介绍1.2 打开文件的方式 2. 实例 - 记事本功能2.1 功能实现2.2 getOpenFileName() 与 getSaveFileName() 的区别2.3 效果演示 3. 资源文件 1. 前言 - 关于Qt文件 文件操作 是应⽤程序必不可少的部分&#xff0c;Qt作…

android 消息提醒

1.创建 MyBackgroundService.java 继承 Service public class MyBackgroundService extends Service {Overridepublic void onCreate() {super.onCreate();Log.i("业务服务", "开起业务服务");//调用服务后在页面手机上创建一个通知消息。if (android.os…

日本EPSON 爱普生HUD汽车抬头显示系统芯片

目前HUD产品在新车上的配装率逐年上升&#xff0c;预计在2025年将达到30%。那么在介绍爱普生HUD整合方案之前&#xff0c;让我们先了解一下什么叫HUD。 HUD&#xff08;Head Up Display&#xff09;中文叫抬头显示系统&#xff0c;又被叫做平行显示系统。早被应用在飞机辅助…

vue基础——java程序员版(总集)

前言&#xff1a; ​ 这是一个java程序员的vue学习记录。 ​ vue是前端的主流框架&#xff0c;按照如今的就业形式作为后端开发的java程序员也是要有所了解的&#xff0c;下面是本人的vue学习记录&#xff0c;包括vue2的基本使用以及引入element-ui&#xff0c;使用的开发工具…

Github 2024-03-28 开源项目日报 Top10

根据Github Trendings的统计,今日(2024-03-28统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目4Jupyter Notebook项目2TypeScript项目2非开发语言项目2Solidity项目1Go项目1Open Interpreter: 本地代码运行和自然语言界面 创建周…

大型驱动水冷负载电阻、缓冲器、滤波器和快速放电电阻

EAK业界首创双面水冷负载电阻器&#xff0c;独特的设计&#xff0c;用户更方便的串联并联使用&#xff0c;强大的水流带走更多因充放电带来的热量。AlN高可靠性氮化铝基板保证了热膨胀不会影响电阻的工作。 液冷电阻器使用水或离子水作为冷却剂。通过添加乙二醇&#xff0c;可以…

如何高效阅读嵌入式代码

大家好&#xff0c;今天给大家介绍如何高效阅读嵌入式代码&#xff0c;文章末尾附有分享大家一个资料包&#xff0c;差不多150多G。里面学习内容、面经、项目都比较新也比较全&#xff01;可进群免费领取。 高效阅读嵌入式代码需要一些技巧和实践经验。以下是一些建议&#xff…