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

JS手写-this绑定实现

news 2026/2/10 15:03:40

在 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

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...

编程新知 2025/10/6 4:03:40

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录第一章概述第二章弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制第三章主要定义 …...

编程新知 2026/1/22 6:07:24

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template>  </template>…...

编程新知 2026/1/31 6:04:01

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言：为什么 Eureka 依然是存量系统的核心？ 尽管 Nacos 等新注册中心崛起，但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制，是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2026/1/31 7:23:48

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展扩展入口文件文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/12/30 22:56:56

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域，高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表，以及基于它们实现的 Reactor 模式，为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。一、I…...

编程新知 2026/2/10 11:29:59

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入（联动）2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/11/10 19:08:45

【Go语言基础【13】】函数、闭包、方法

文章目录零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理二、函数类型与高阶函数1. 函数类型定义2. 高阶函数（函数作为参数、返回值） 三、匿名函数与闭包1. 匿名函数（Lambda函…...

编程新知 2025/12/8 19:02:25

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路： 分别把 tabledata 和表尾相关数据 console.log() 发现更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行升级↑：async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2026/2/10 11:29:00

宇树科技，改名了！

提到国内具身智能和机器人领域的代表企业，那宇树科技（Unitree）必须名列其榜。最近，宇树科技的一项新变动消息在业界引发了不少关注和讨论，即： 宇树向其合作伙伴发布了一封公司名称变更函称，因…...

编程新知 2026/1/28 9:44:45

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树(下)

Java 语言特性(面试系列1)

阿里云ACP云计算备考笔记 (5)——弹性伸缩

2.Vue编写一个app

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

select、poll、epoll 与 Reactor 模式

Element Plus 表单(el-form)中关于正整数输入的校验规则

【Go语言基础【13】】函数、闭包、方法

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

宇树科技，改名了！

1. 实现 bind

2. 实现 call

3. 实现 apply

示例代码

详细步骤

测试

相关文章：

1. 实现 `bind`

2. 实现 `call`

3. 实现 `apply`