JS中call()、apply()、bind()改变this指向的原理

大家如果想了解改变this指向的方法,大家可以阅读本人的这篇改变this指向的六种方法
大家有没有想过这三种方法是如何改变this指向的?我们可以自己写吗?
答案是:可以自己写的
让我为大家介绍一下吧!

1.call()方法的原理

	Function.prototype.calls = function (context, ...a) {
		// 如果没有传或传的值为空对象 context指向window
		if (typeof context == null || context == undefined) {
			context = window;
		}
		// 创造唯一的key值  作为我们构造的context内部方法名
		let fn = Symbol();
		// this指向context[fn]方法
		context[fn] = this;
		return context[fn](...a);
	}
	let obj = {
		func(a,b){
			console.log(this);
			console.log(this.age);
			console.log(a);
			console.log(b);
		}
	}
	let obj1 = {
		age:"张三"
	}
	obj.func.calls(obj1,1,2);

打印结果:
在这里插入图片描述

2.apply()方法的原理

	// apply与call原理一致  只是第二个参数是传入的数组
	Function.prototype.myApply = function (context, args) {
		if (!context || context === null) {
			context = window;
		}
		// 创造唯一的key值  作为我们构造的context内部方法名
		let fn = Symbol();
		context[fn] = this;
		// 执行函数并返回结果
		return context[fn](...args);
	};
	let obj = {
		func(a, b) {
			console.log(this);
			console.log(this.age);
			console.log(a);
			console.log(b);
		}
	}
	let obj1 = {
		age: "张三"
	}
	obj.func.myApply(obj1, [1,2]);

打印结果:
在这里插入图片描述

3.bind()方法的原理

	Function.prototype.myBind = function (context) {
		// 如果没有传或传的值为空对象 context指向window
		if (typeof context === "undefined" || context === null) {
			context = window
		}
		let fn = Symbol(context)
		context[fn] = this //给context添加一个方法 指向this
		// 处理参数 去除第一个参数this 其它传入fn函数
		let arg = [...arguments].slice(1) //[...xxx]把类数组变成数组 slice返回一个新数组
		context[fn](arg) //执行fn
		delete context[fn] //删除方法
	}
	let obj = {
		func(a) {
			console.log(this);
			console.log(this.age);
		}
	}
	let obj1 = {
		age: "张三"
	}
	obj.func.myBind(obj1);

打印结果:
在这里插入图片描述
感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

品牌控价成本如何把控

品牌在发展,价格就需要持续关注,当出现乱价、低价、窜货时就应投入人力去治理,但企业生存,还要考虑成本,如何在保证控价效果的基础上,做到使用最低成本呢,这些问题除了控价本身外,也…

Python语言基础知识(二)

文章目录 1、条件表达式2、分支结构—常见的分支结构2.1、分支结构—单分支选择结构2.2、分支结构—双分支选择结构2.3、分支结构—多分支选择结构2.4、分支结构—选择结构的嵌套 3、循环结构3.1、循环结构— for循环与while循环 1、条件表达式 在选择和循环结构中&#xff0c…

1.nacos注册与发现及源码注册流程

目录 概述nacos工程案例nacos服务注册案例版本说明本地启动 nacos-server搭建 spring cloud alibaba 最佳实践服务注册案例服务订阅案例 nacos注册源码流程源码关键点技巧 结束 概述 通过本文,学会如何确定项目组件版本(减少可能出现的jar包冲突),nacos…

临床骨科常用的肩关节疾病量表,医生必备!

根据骨科医生的量表使用情况,常笑医学整理了临床骨科常用的肩关节疾病量表,为大家分享临床常见的肩关节疾病量表评估内容,均支持量表下载和在线使用,建议收藏! 1.臂、肩、手功能障碍(disabilites of the ar…

Fiddler抓包模拟器(雷电模拟器)

Fiddler设置 List item 打开fiddler,的options 点击OK,重启fiddler 模拟器 更改网络设置 IP可以在电脑上终端上查看 然后在模拟器浏览器中输入IP:端口 安装证书

机房动力环境智能监控系统

机房动力环境智能监控系统是指利用先进的传感器技术、通信技术、数据处理技术和信息安全技术等,依托电易云-智慧电力物联网对机房的动力设备和环境进行实时监测、数据采集、数据分析、故障预警和远程管理,以实现机房的高效运行和安全保障。 该系统主要包…

【Vue3从入门到项目实现】RuoYi-Vue3若依框架前端学习——动态路由与菜单栏

菜单栏 若依框架的侧边栏组件通常由菜单项和子菜单组成。 登录后,会获取用户拥有的路由菜单 {"msg": "操作成功","code": 200,"data": [{"name": "System","path": "/system",…

初识Linux:权限(1)

目录 提示:以下指令均在Xshell 7 中进行 Linux 的权限 内核: 查看操作系统版本 查看cpu信息 查看内存信息 外部程序: 用户: 普通用户变为超级用户: su 和 su-的区别: root用户变成普通用户&#…

Proteus仿真--基于ADC0808设计的调温报警器

本文介绍基于ADC0808实现的调温报警器设计(完整仿真源文件及代码见文末链接) 温度调节使用滑动变阻器模拟实现,ADC0808采集信号并输出在LCD上面显示,报警系统是LED灯和蜂鸣器实现声光电报警 仿真图如下 仿真运行视频 Proteus仿真…

[网鼎杯 2020 朱雀组]phpweb1

提示 call_user_func()函数先通过php内置函数来进行代码审计绕过system(##不止一种方法) 拿到题目养成一个好的习惯先抓个包 从抓到的包以及它首页的报错来看,这里死活会post传输两个参数func以及p func传输函数,而p则是传输参数的…

【智能家居】六、摄像头安装实现监控功能点、人脸识别(face_recognition的使用)

一、定义及第三方库的说明 OCR (光学字符识别)文字识别、图像识别mjpg-streamer实时流式传输视频工具树莓派mjpg-streamer Face Recognition人脸识别 Dlib 计算机视觉问题的工具和算法face_recognition库OpenCV 计算机视觉和机器学习的开源库 三、香…

Centos7、Mysql8.0 load_file函数返回为空的终极解决方法--暨selinux的深入理解

零、问题背景 最近想换房,为了方便自己对比感兴趣的房子,因此决定将目标房源的基本信息放在表里,特别是要一目了然的看到众多房子的各种图纸和照片,因此决定要在Mysql8.0.34数据库中以二进制形式保存图片(抛开合理性和…

Python Authlib库:构建安全可靠的身份验证系统

更多资料获取 📚 个人网站:ipengtao.com 在现代应用程序中,安全性是至关重要的,特别是在处理用户身份验证时。Authlib库为Python开发者提供了一套强大的工具,用于简化和增强身份验证和授权流程。本文将深入探讨Authli…

STM32F407-14.3.15-01单脉冲模式

单脉冲模式 单脉冲模式 (OPM) 是上述模式的一个特例。在这种模式下,计数器可以在一个激励信号的触发下启动,并可在一段可编程的延时后产生一个脉宽可编程的脉冲。 可以通过从模式控制器启动计数器。可以在输出比较模式或 PWM 模式下生成波形。将 TIMx_C…

golang slice 数组针对某个字段进行排序

这里主要用到golang的sort.Sort方法,先看这个函数的简介: 介绍链接:https://books.studygolang.com/The-Golang-Standard-Library-by-Example/chapter03/03.1.html 如何实现: import "sort"// UserInfo 用户信息结构…

2023年江西省“振兴杯”网络信息行业(信息安全测试员)职业技能竞赛 Write UP

文章目录 一、2023csy-web1二、2023csy-web2三、2023csy-web3四、2023csy-web4五、2023csy-misc1六、2023csy-misc2七、2023csy-crypto1八、2023csy-re1 一、2023csy-web1 该题提供一个web靶场,《伟大的挑战者》,分值:5分 web页面一直在播放c…

带大家做一个,易上手的家常辣子鸡

先从冰箱拿出鸡肉解冻 拿小半根葱 去掉最外面一层皮 切成小段 最备好 花椒 干辣椒 准备四五个大料 起锅烧油 这道菜需要放其他菜两到三倍的油 油温上来之后 放入干辣椒和花椒进行翻炒 等它们都烧黑之后捞出来 这样 辣味就留在油里面了 然后 倒入鸡肉 葱段 大料 然后 倒…

内网渗透基础

内网 内网指的是内部局域网,常说的LAN(local area network)。常见家庭wifi网络和小型的企业网络,通常内部计算机直接访问路由器设备,路由器设备接入移动电信的光纤实现上网。 内部局域网可以通过交换机/防火墙组成多个…

Remix IDE 快速开始Starknet

文章目录 一、Remix 项目二、基于Web的开发环境Remix 在线 IDE三、Starknet Remix 插件如何使用使用 Remix【重要】通过 Starknet by Example 学习一、Remix 项目 Remix 项目网站 在以太坊合约开发领域,Remix 项目享有很高的声誉,为各个级别的开发人员提供功能丰富的工具集…

《洛谷深入浅出进阶篇》p2568 GCD

P2568 GCD - 洛谷 | 计算机科学教育新生态 (luogu.com.cn)https://www.luogu.com.cn/problem/P2568 大致题意&#xff1a;给定正整数n&#xff0c;求1< x,y<n 且 gcd&#xff08;x&#xff0c;y&#xff09;为素数的数对&#xff08;x&#xff0c;y&#xff09;有多少对。…
最新文章