当前位置：首页 > news >正文

JS手写-this绑定实现

news 2025/12/15 22:06:33

在 JavaScript 中，bind、call 和 apply 方法都可以用来改变函数的 this 指向。下面我们将分别实现这些方法的简单版本。

1. 实现 `bind`

bind 方法创建一个新的函数，在调用时设置 this 值，并返回这个新的函数。

Function.prototype.myBind = function (context) {if (typeof this !== 'function') {throw new TypeError('Not a function');}const fn = this;const args = Array.prototype.slice.call(arguments, 1);return function bound() {const boundArgs = Array.prototype.slice.call(arguments);return fn.apply(context, args.concat(boundArgs));};
};

2. 实现 `call`

call 方法立即调用函数，并设置 this 值，同时传递参数列表。

Function.prototype.myCall = function (context) {if (typeof this !== 'function') {throw new TypeError('Not a function');}context = context || window;const args = Array.prototype.slice.call(arguments, 1);context.fn = this;const result = context.fn(...args);delete context.fn;return result;
};

3. 实现 `apply`

apply 方法与 call 类似，但传递的参数是一个数组。

Function.prototype.myApply = function (context, args) {if (typeof this !== 'function') {throw new TypeError('Not a function');}context = context || window;args = args || [];context.fn = this;const result = context.fn(...args);delete context.fn;return result;
};

示例代码

下面是一个完整的示例，展示了如何使用这些自定义的方法：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义 bind, call, apply</title>
</head>
<body><script type="text/javascript">Function.prototype.myBind = function (context) {if (typeof this !== 'function') {throw new TypeError('Not a function');}const fn = this;const args = Array.prototype.slice.call(arguments, 1);return function bound() {const boundArgs = Array.prototype.slice.call(arguments);return fn.apply(context, args.concat(boundArgs));};};Function.prototype.myCall = function (context) {if (typeof this !== 'function') {throw new TypeError('Not a function');}context = context || window;const args = Array.prototype.slice.call(arguments, 1);context.fn = this;const result = context.fn(...args);delete context.fn;return result;};Function.prototype.myApply = function (context, args) {if (typeof this !== 'function') {throw new TypeError('Not a function');}context = context || window;args = args || [];context.fn = this;const result = context.fn(...args);delete context.fn;return result;};// 测试对象const obj = {name: '牛客网'};// 测试函数function greet(message) {console.log(`${message}, ${this.name}`);}// 使用 myBindconst greetBound = greet.myBind(obj, '欢迎来到');greetBound(); // 输出: 欢迎来到, 牛客网// 使用 myCallgreet.myCall(obj, '欢迎来到'); // 输出: 欢迎来到, 牛客网// 使用 myApplygreet.myApply(obj, ['欢迎来到']); // 输出: 欢迎来到, 牛客网</script>
</body>
</html>

详细步骤

实现 myBind：
- 检查调用者是否为函数。
- 获取上下文 context 和传入的参数 args。
- 返回一个新的函数 bound，在调用时使用 apply 方法设置 this 值并传递参数。
实现 myCall：
- 检查调用者是否为函数。
- 获取上下文 context 和传入的参数 args。
- 将函数赋值给 context 的一个临时属性 fn，调用该属性并传递参数，然后删除该属性。
实现 myApply：
- 检查调用者是否为函数。
- 获取上下文 context 和传入的参数数组 args。
- 将函数赋值给 context 的一个临时属性 fn，调用该属性并传递参数，然后删除该属性。

测试

使用 myBind：
- 创建一个绑定了 obj 上下文的新函数 greetBound，并调用它。
使用 myCall：
- 直接调用 greet 函数，并设置 obj 为 this 值。
使用 myApply：
- 直接调用 greet 函数，并设置 obj 为 this 值，参数以数组形式传递。

JS手写-this绑定实现

在 JavaScript 中，bind、call 和 apply 方法都可以用来改变函数的 this 指向。下面我们将分别实现这些方法的简单版本。 1. 实现 bind bind 方法创建一个新的函数，在调用时设置 this 值，并返回这个新的函数。 Function.prototype.myBind …...

编程日记 2024/11/14 9:26:05

【时间之外】IT人求职和创业应知【31】

目录新闻一：2024年“秦创原沣东杯”陕西省科技工作者创新创业大赛颁奖仪式暨沣东新城机器人产业发展大会盛大启幕新闻二：声网CEO赵斌：RTE将成为生成式AI时代AI Infra的关键部分新闻三：“5G工业互联网”融合应用试点城市名单…...

编程日记 2024/11/14 9:20:59

如何使用ffmpeg命令行进行录屏

录屏软件，我们去网上下载，发现有很多软件都是要收费的！但是录屏功能很难做吗？为啥都需要收费呢？ 于是我整了个小demo，用于实现基础的屏幕录制功能。思路很简单，考虑到 FFMpeg.exe是一个非常成…...

编程日记 2024/11/14 9:19:58

ODOO学习笔记（8）：模块化架构的优势

灵活性与可定制性业务流程适配：企业的业务流程往往因行业、规模和管理方式等因素而各不相同。Odoo的模块化架构允许企业根据自身的具体业务流程，选择和组合不同的模块。例如，一家制造企业可以启用采购、库存、生产和销售模块，并通…...

编程日记 2024/11/14 9:11:49

数字IC后端实现之Innovus specifyCellEdgeSpacing和ICC2 set_placement_spacing_rule的应用

昨天帮助社区IC训练营学员远程协助解决一个Calibre DRC案例。通过这个DRC Violation向大家分享下Innovus和ICC2中如何批量约束cell的spacing rule。数字IC后端手把手实战教程 | Innovus verify_drc VIA1 DRC Violation解析及脚本自动化修复方案下图所示为T12nm A55项目的Ca…...

编程日记 2024/11/14 9:10:48

每日小练：Day2

1.乒乓球筐题目链接：乒乓球筐__牛客网题目描述： 这道题主要考察B盒是不是A盒的子集，我们可以通过哈希表来做单哈希表 import java.util.Scanner;// 注意类名必须为 Main, 不要有任何 package xxx 信息 public class Main {public stat…...

编程日记 2024/11/14 9:09:47

上传压缩包 kafka-eagle-bin-2.0.8.tar.gz 到集群 /root/efak 目录 cd /root/efak tar -zxvf kafka-eagle-bin-2.0.8.tar.gz cd /root/efak/kafka-eagle-bin-2.0.8 mkdir /root/efakmodule tar -zxvf efak-web-2.0.8-bin.tar.gz -C /root/efakmodule/ mv /root/efakmodule/efak…...

编程日记 2024/11/14 9:08:45

深入理解指针

在初步了解了指针的用法之后，我们可以想一想，既然一个变量有地址，而且在上一篇文章中我们知道了一个数组也有地址，那么函数、字符串这些东西有没有地址呢？如果有，那这些地址有什么用？我们又要怎…...

编程日记 2024/11/14 9:03:39

自动驾驶合集（更新中）

文章目录车辆模型控制路径规划车辆模型车辆模型基础合集控制控制合集路径规划规划合集...

编程日记 2024/11/14 9:02:37

Chapter 14 scoped样式以及data函数

欢迎大家订阅【Vue2Vue3】入门到实践专栏，开启你的 Vue 学习之旅！ 文章目录 1 scoped样式1.1 全局样式1.2 局部样式1.3 工作原理2 data函数 1 scoped样式 1.1 全局样式全局样式是指作用于整个应用程序的样式，不论在哪个组件中定义&#x…...

编程日记 2024/11/14 8:57:31

Golang | Leetcode Golang题解之第557题反转字符串中的单词III

题目： 题解： func reverseWords(s string) string {length : len(s)ret : []byte{}for i : 0; i < length; {start : ifor i < length && s[i] ! {i}for p : start; p < i; p {ret append(ret, s[start i - 1 - p])}for i < le…...

编程日记 2024/11/14 8:56:28

区块链技术在电子政务中的应用

💓 博客主页：瑕疵的CSDN主页 📝 Gitee主页：瑕疵的gitee主页 ⏩ 文章专栏：《热点资讯》区块链技术在电子政务中的应用区块链技术在电子政务中的应用区块链技术在电子政务中的应用引言区块链技术概述定义与原理发…...

编程日记 2024/11/14 8:55:27

Simulink中Matlab function使用全局变量

目录一. 引言二. 普通Matlab function使用全局变量三. Simulink中的Matlab function使用全局变量四. 如何利用Matlab function的全局变量施加随机噪声一. 引言最近发现了之前仿真中的一个问题，记录一下备忘。 Matlab function中有时候需要用到全局变量&#xf…...

编程日记 2024/11/14 8:54:24

WPF-控件的属性值的类型转化

控件的属性值需要转成int、double进行运算的，可以使用一下方法页面代码 <StackPanel Margin"4,0,0,0" Style"{StaticResource Form-StackPanel}"> <Label Content"替换后材料增加金额&#xff…...

编程日记 2024/11/14 8:52:22

海思Hi3516DV300上播放G711U音频文件

在海思Hi3516DV300芯片运行Linux系统下，可通过如下函数来实现G711U音频文件的播放： int ADecPlayVoiceFile(const char* filename) {FILE* pfd;AUDIO_STREAM_S stStream;HI_S32 s32Ret,length,decLength,allLength 0,aChn 0;HI_U8 buf[SAMPLE_AUDIO_P…...

编程日记 2024/11/14 8:50:18

Linux源码阅读笔记-V4L2框架基础介绍

V4L2视频设备驱动基础 V4L2 是专门为 Linux 设备设计的整套视频框架（其主要核心在 Linux 内核，相当于 Linux 操作系统上层的视频源捕获驱动框架）。为上层访问系统底层的视频设备提供一个统一的标准接口。V4L2 驱动框架能够支持多种类型设备&…...

编程日记 2024/11/14 8:49:16

列表（list）

一、前言本次博客主要讲解 list 容器的基本操作、常用接口做一个系统的整理，结合具体案例熟悉自定义内部排序方法的使用。如有任何错误，欢迎在评论区指出，我会积极改正。二、什么是list list是C的一个序列容器，插入和删除元素…...

编程日记 2024/11/14 8:47:12

使用Python抓取数据的实战指南

引言在当今信息爆炸的时代，数据已成为一种宝贵的资源。无论是学术研究、市场分析，还是个人兴趣，数据的获取都是至关重要的一步。Python，凭借其强大的库和简洁的语法，成为了数据抓取（也称为网络爬虫或网页…...

编程日记 2024/11/14 8:42:03

GIC寄存器介绍

往期内容本专栏往期内容，interrtupr子系统： 深入解析Linux内核中断管理：从IRQ描述符到irq domain的设计与实现Linux内核中IRQ Domain的结构、操作及映射机制详解中断描述符irq_desc成员详解Linux 内核中断描述符 (irq_desc) 的初始化与动态分…...

编程日记 2024/11/14 8:41:02

c++实现B树(下)

书接上回小吉讲的是B树的搭建和新增方法的实现（blog传送门🚪：B树实现上）（如果有小可爱对B树还不是很了解的话，可以先看完上一篇blog，再来看小吉的这篇blog）。那这一篇主要讲的是B树中…...

编程日记 2024/11/14 8:38:59

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明：server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/12/14 14:27:59

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“🤖手搓TuyaAI语音指令 😍秒变表情包大师，让萌系Otto机器人🔥玩出智能新花样！开整！” 🤖 Otto机器人 → 直接点明主体手搓TuyaAI语音 → 强调自主编程/自定义语音控制（TuyaAI…...

编程新知 2025/12/11 5:02:54

k8s业务程序联调工具-KtConnect

概述原理工具作用是建立了一个从本地到集群的单向VPN，根据VPN原理，打通两个内网必然需要借助一个公共中继节点，ktconnect工具巧妙的利用k8s原生的portforward能力，简化了建立连接的过程，apiserver间接起到了中继节…...

编程新知 2025/12/14 20:43:55

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像（比如分辨率3000*3000的图像）的办法，尤其是想把内存中的裸数据（只有图像的数据，不包…...

编程新知 2025/12/13 5:43:36

数学建模-滑翔伞伞翼面积的设计，运动状态计算和优化！

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态，并优化伞翼面积的设计。一、问题分析滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

编程新知 2025/12/14 0:54:05

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的，需要先安…...

编程新知 2025/12/6 7:19:48

CSS3相关知识点

CSS3相关知识点 CSS3私有前缀私有前缀私有前缀存在的意义常见浏览器的私有前缀 CSS3基本语法CSS3 新增长度单位CSS3 新增颜色设置方式CSS3 新增选择器CSS3 新增盒模型相关属性box-sizing 怪异盒模型resize调整盒子大小box-shadow 盒子阴影opacity 不透明度 CSS3 新增背景属性ba…...

编程新知 2025/12/9 9:21:13

医疗AI模型可解释性编程研究：基于SHAP、LIME与Anchor

1 医疗树模型与可解释人工智能基础医疗领域的人工智能应用正迅速从理论研究转向临床实践，在这一过程中，模型可解释性已成为确保AI系统被医疗专业人员接受和信任的关键因素。基于树模型的集成算法（如RandomForest、XGBoost、LightGBM）因其卓越的预测性能和相对良好的解释性…...

编程新知 2025/12/13 5:38:36

EasyRTC音视频实时通话功能在WebRTC与智能硬件整合中的应用与优势

一、WebRTC与智能硬件整合趋势随着物联网和实时通信需求的爆发式增长，WebRTC作为开源实时通信技术，为浏览器与移动应用提供免插件的音视频通信能力，在智能硬件领域的融合应用已成必然趋势。智能硬件不再局限于单一功能，对实时…...

编程新知 2025/12/8 18:04:06

MeanFlow：何凯明新作，单步去噪图像生成新SOTA

1.简介这篇文章介绍了一种名为MeanFlow的新型生成模型框架，旨在通过单步生成过程高效地将先验分布转换为数据分布。文章的核心创新在于引入了平均速度的概念，这一概念的引入使得模型能够通过单次函数评估完成从先验分布到数据分布的转换，显…...

编程新知 2025/12/12 17:10:20

JS手写-this绑定实现

1. 实现 `bind`

2. 实现 `call`

3. 实现 `apply`

示例代码

详细步骤

测试

相关文章：

JS手写-this绑定实现

【时间之外】IT人求职和创业应知【31】

如何使用ffmpeg命令行进行录屏

ODOO学习笔记（8）：模块化架构的优势

数字IC后端实现之Innovus specifyCellEdgeSpacing和ICC2 set_placement_spacing_rule的应用

每日小练：Day2

ubuntu 安装kafka-eagle

深入理解指针

自动驾驶合集（更新中）

Chapter 14 scoped样式以及data函数

Golang | Leetcode Golang题解之第557题反转字符串中的单词III

区块链技术在电子政务中的应用

Simulink中Matlab function使用全局变量

WPF-控件的属性值的类型转化

海思Hi3516DV300上播放G711U音频文件

Linux源码阅读笔记-V4L2框架基础介绍

列表（list）

使用Python抓取数据的实战指南

GIC寄存器介绍

c++实现B树(下)

Docker 运行 Kafka 带 SASL 认证教程

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

k8s业务程序联调工具-KtConnect

wpf在image控件上快速显示内存图像

数学建模-滑翔伞伞翼面积的设计，运动状态计算和优化！

【Linux】Linux安装并配置RabbitMQ

CSS3相关知识点

医疗AI模型可解释性编程研究：基于SHAP、LIME与Anchor

EasyRTC音视频实时通话功能在WebRTC与智能硬件整合中的应用与优势

MeanFlow：何凯明新作，单步去噪图像生成新SOTA

1. 实现 bind

2. 实现 call

3. 实现 apply

示例代码

详细步骤

测试

相关文章：

1. 实现 `bind`

2. 实现 `call`

3. 实现 `apply`