手写实现call,apply,和bind方法

手写实现call,apply和bind方法

call,apply和bind方法均是改变this指向的硬绑定方法,要想手写实现此三方法,都要用到一个知识点,即对象调用函数时,this会指向这个对象(谁调用this就指向谁)!

先设定一个测试函数及测试对象:

function func(num1, num2) {console.log("this:", this)return num1 + num2
}const testObj = {test: '测试用的对象'
}

手写实现call方法,

自己写的,所以把方法名定义为myCall。实现func的this指向testObj,输出num1 + num2的值。
测试用例:

const res = func.myCall(testObj, 1, 2);
console.log("res:", res);
// 输出this是{ test: '测试用的对象' },
//num1 + num2 计算结果 3

第一步:要实现任何函数都能使用这个myCall方法,则该方法需要定义在原型上面,因此:

Function.prototype.myCall = function(thisArg, ...args) {
}
// thisArg -- 待绑定this的参数对象。
// args -- 待传入的参数,
// 因为call传入参数是挨个传入,所以用rest参数方法,...args

第二步: 设置this,并调用原函数

Function.prototype.myCall = function (thisArg, ...args) {const key = Symbol('key');thisArg[key] = this;  // 步骤aconst res = thisArg[key](...args);  // 步骤bdelete thisArg[key]  // 步骤creturn res
}

步骤a解释:
给传入的thisArg对象添加一个过渡性的属性,此处用Symbol,因为Symbol具有唯一性,不会与thisArg里的属性发生重名覆写的情况。步骤a的this是原函数(本例中是func)。因为执行func.myCall()时,根据谁调用this就指向谁的原则,myCall()里的this即指向func。因此步骤a最终是往thisArg中添加了原函数func。

步骤b解释:
执行thisArg中刚刚添加的函数func。依旧是谁调用this指向谁的原则,func的this就指向的thisArg。

步骤c解释:删除掉无意义的过渡性属性。

所以上述测试用例中thisArg – testObj,num1 – 1, num2 – 2,结果打印如下:
在这里插入图片描述

手写实现apply方法

apply方法和call方法区别在于传入参数是个数组。其余实现原理相同。所以实现代码:

Function.prototype.myApply = function (thisArg, args) {const key = Symbol('key');thisArg[key] = this; const res = thisArg[key](...args); delete thisArg[key] return res
}const res = func.myApply(testObj, [1, 2]);
console.log("res:", res);
// 输出this是{ test: '测试用的对象' },
//num1 + num2 计算结果 3

手写实现bind方法

bind方法和call方法不同点在于bind返回的是个函数。所以实现代码如下

Function.prototype.myBind = function (thisArg, ...args) {return (...args2) => {  // 允许调用的时候继续传入参数const key = Symbol('key');thisArg[key] = this;  // 箭头函数中this是定义时的this,也就是myBind的thisconst res = thisArg[key](...args, ...args2)delete thisArg[key]return res}
}const res = func.myBind(testObj, 1);
console.log("res:", res(2));

结果:
在这里插入图片描述
简而言之,bind可以理解为返回一个函数,返回的函数中使用call改变了this指向。

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

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

相关文章

Redis全系列学习基础篇之位图(bitmap)常用命令的解析

文章目录 描述常用命令及解析常用命令解析 应用场景统计不确定时间周期内用户登录情况思路分析实现 统计某一特定时间内活跃用户(登录一次即算活跃)的数量思路分析与实现 描述 bitmap是redis封装的用于针对位(bit)的操作,其特点是计算效率高,占用空间少,常被用来统计…

Java | Leetcode Java题解之第518题零钱兑换II

题目&#xff1a; 题解&#xff1a; class Solution {public int change(int amount, int[] coins) {int[] dp new int[amount 1];boolean[] valid new boolean[amount 1];dp[0] 1;valid[0] true;for (int coin : coins) {for (int i coin; i < amount; i) {valid[i…

Java的包、final关键字以及代码块

Java的包、final关键字以及代码块 一、包 包的作用 &#xff1a; ​ 包就是文件夹&#xff0c;用来管理各种不同功能的Java类 包名的书写规则&#xff1a; ​ 公司域名反写 包的作用&#xff0c;需要全部英文小写&#xff0c;见名知意 什么是全类名&#xff1a; ​ 包名…

【AI视频换脸整合包及教程】AI换脸新星:Rope——让换脸变得如此简单

在数字技术迅猛发展的今天&#xff0c;人工智能&#xff08;AI&#xff09;的应用已经渗透到了我们生活的方方面面&#xff0c;从日常的语音助手到复杂的图像处理&#xff0c;无不体现着AI技术的魅力。特别是在娱乐和创意领域&#xff0c;AI技术更是展现出了惊人的潜力。其中&a…

Ubuntu下安装和配置MySQL5.7教程

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 在ubuntu下安装MySQL数据库 查看操作系统版本 ​编辑 添加 MySQL APT 源 访问下载页面并下载发布包 安装发布包 安装MySQL 查看MySQL状态 开启自启动 登…

Java中常见的异常类型

1、Exception和Error有什么区别&#xff1f; 首先Exception和Error都是继承于Throwable类&#xff0c;在Java中只有Throwable类型的实例才可以被抛出&#xff08;throw&#xff09;或者捕获&#xff08;catch&#xff09;&#xff0c;它是异常处理机制的基本组成类型。 Except…

Unity的gRPC使用之实现客户端

应用背景&#xff1a;本想Unity调用C的dll库获取一些数据资源&#xff0c;但是由于自己调用的C库模块化处理的不太理想&#xff0c;众多dll之间相互依赖&#xff0c;使得在调用dll的时候&#xff0c;会忽略一些dll的缺失&#xff0c;使Unity项目报错&#xff0c;故想到了使用gR…

GPU-主板-内存-硬盘-CPU-电源分类及区别总结大全

一、背景 用了7年的笔记本&#xff0c;现在感觉它实在是扛不住了&#xff0c;中间自己缝缝补补坚持到现在&#xff0c;把机械硬盘换成了固态&#xff0c;加装了内存条。换过2次还是3次风扇&#xff08;不知道为啥坏的&#xff0c;高转速时哧哧响&#xff09;&#xff0c;换过一…

【JavaSE练习题】数组的创建和使用

数组的创建和使用 奇数位于偶数之前冒泡排序两数之和只出现一次的数字多数元素存在连续三个奇数的数组 奇数位于偶数之前 调整数组顺序使得奇数位于偶数之前。调整之后&#xff0c;不关心大小顺序。 如数组&#xff1a;[1,2,3,4,5,6] 调整后可能是&#xff1a;[1, 5, 3, 4, 2,…

使用Vue.js和Vuex构建可维护的前端应用

使用Vue.js和Vuex构建可维护的前端应用 Vue.js简介 安装Vue.js 使用npm安装 使用CDN引入 创建Vue项目 安装Vuex 初始化Vuex Store 在Vue组件中使用Store Vuex模块化 Vuex命名空间 Vuex插件 Vuex热重载 Vuex持久化状态 Vuex调试工具 Vuex的高级用法 异步Actions 中间件 Vuex的…

小新学习k8s第四天之发布管理

一、金丝雀发布&#xff08;灰度发布&#xff09; Deployment控制器支持自定义控制更新过程中的滚动节奏&#xff0c;如“暂停(pause)”或“继续(resume)”更新操作。 ①比如等待第一批新的Pod资源创建完成后立即暂停更新过程&#xff0c;此时&#xff0c;仅存在一部分新版本的…

机器人领域中的scaling law:通过复现斯坦福机器人UMI——探讨数据规模化定律(含UMI的复现关键)

前言 在24年10.26/10.27两天&#xff0c;我司七月在线举办的七月大模型机器人线下营时&#xff0c;我们带着大家一步步复现UMI「关于什么是UMI&#xff0c;详见此文&#xff1a;UMI——斯坦福刷盘机器人&#xff1a;从手持夹持器到动作预测Diffusion Policy(含代码解读)」&…

项目模块1~12总结:服务器大模块梳理

一、思维导图 二、设计思路 1、各种回调函数梳理 服务器里面包含了监听套接字和监听到的通信套接字&#xff08;新连接&#xff09;&#xff0c;我们要对这两种套接字进行设置回调函数&#xff0c;其中监听套接字里面只要设置读回调&#xff0c;通信套接字要设置5种回调&…

【django】Django REST Framework 序列化与反序列化详解

目录 1、什么是序列化和反序列化&#xff1f; 2、Django REST Framework中的序列化和反序列化 3、安装与配置&#xff08;第10章是从零开始&#xff09; 3.1 安装 3.2 配置 4、基本使用 4.1 创建序列化器 4.2 使用序列化器&#xff08;将数据序列化返回给前端&#xff…

三周精通FastAPI:27 使用使用SQLModel操作SQL (关系型) 数据库

官网文档&#xff1a;https://fastapi.tiangolo.com/zh/tutorial/sql-databases/ SQL (关系型) 数据库 FastAPI不需要你使用SQL(关系型)数据库。 但是您可以使用任何您想要的关系型数据库。 这里我们将看到一个使用SQLModel的示例。 SQLModel是在SQLAlchemy和Pydantic的基础…

C++中使用seekg函数进行随机读写

seekg&#xff08;off type offset, ios::seekdir origin ); //作用:设置输入流的位置 这个函数有俩个参数&#xff0c;第一个是表示偏移量&#xff0c;第二个是表示相对位置 infile.seekg(-50, infile.end);//表示从文件结尾开始&#xff0c;向文件开头方向读50个字节 参数 …

2-137 基于matlab的sigmoid函数的变步长自适应语音信号增强

基于matlab的sigmoid函数的变步长自适应语音信号增强&#xff0c;与传统LMS相对比&#xff0c;比较不同的变步长函数去噪效果&#xff0c;并基于较好的去噪算法分析不同变步长中参数变化对降噪的影响。程序已调通&#xff0c;可直接运行。 下载源程序请点链接&#xff1a;2-13…

有效利用关键词研究工具提升网站流量的策略

内容概要 在当前信息泛滥的时代&#xff0c;关键词研究工具的重要性愈发突出。它们不仅能帮助我们识别和分析用户搜索行为&#xff0c;还能够精准地为网站内容定位&#xff0c;确保我们能够吸引并留住目标受众。关键词研究工具通过提供大量的数据&#xff0c;帮助站长和营销策…

探索全托的自闭症学校:打造个性化成长场所

文章详情&#xff1a;http://www.zibizhengwang.com/page35.html 在广州这座充满活力的城市里&#xff0c;有一个特别的地方&#xff0c;它以独特的教育理念和深切的关怀之心&#xff0c;为自闭症儿童提供了一个温暖的避风港。这个地方就是星贝育园自闭症儿童寄宿制学校&#…

使用RabbitMQ实现微服务间的异步消息传递

使用RabbitMQ实现微服务间的异步消息传递 RabbitMQ简介 安装RabbitMQ 在Ubuntu上安装RabbitMQ 在CentOS上安装RabbitMQ 配置RabbitMQ 创建微服务 生产者服务 安装依赖 生产者代码 消费者服务 消费者代码 运行微服务 消息模式 直接模式 生产者代码 消费者代码 扇出模式 生产…