详解JS中 call 方法的实现
2024-09-08 16:57:07
摘要:本文将全面的,详细解析call方法的实现原理
本文分享自华为云社区《关于 JavaScript 中 call 方法的实现,附带详细解析!》,作者:CoderBin。
本文将全面的,详细解析call方法的实现原理,并手写出自己的call方法,相信看完本文的小伙伴都能从中有所收获。
call 方法的实现
1.函数作用
调用函数,可传入参数,改变this指向
2.总体步骤
- 边界判断(this,context)
- 将调用的函数设置为对象(传入的context)的方法(改变this指向)
- 调用函数,得到返回值,并返回
3. 详细步骤
1. 边界判断
- 判断当前 this 是否为一个函数,否则返回错误消息
- 判断传入的 context 参数是否存在,存在则使用 Object() 转换为对象赋给 context,否则将 window 赋值给 context
2. 将调用的函数设置为对象(传入的context)的方法(改变this指向)
3. 调用函数,得到返回值,并返回
- 调用函数,得到结果
- 删除 context 身上的 fn 函数
- 返回结果
4. 代码实现
/**
* !实现 binCall() 方法
* @param {*} context 绑定的对象
* @param {...any} args 剩余参数
* @returns
*/
Function.prototype.binCall = function(context, ...args) {
if (typeof this !== 'function') console.error('type Error'); // 1
context = (context!==null && context!==undefined) ? Object(context) : window
context.fn = this // 2
const result = context.fn(...args) // 3
delete context.fn;
return result
}
5. 测试代码
// 测试
function sum(num1, num2) {
console.log('sum 被执行', this);
return num1 + num2
}
// 原生的 call() 方法
console.log(sum.call({name: 'bin'},1,2));
// 自定义的 binCall() 方法
console.log(sum.binCall({name: 'bin'},1,2));
经过原生的call方法和手写的binCall方法测试,我们手动实现的binCall方法也能实现原生call方法的功能
6. 细节解析
- this 指向的就是调用 binCall() 的那个函数(隐式绑定);
- 传入的 context 参数表示:将 this 的指向改为这个参数;
- 改变 this 指向其实就是在 context 上添加一个临时的方法,值为 this;
- 调用 context.fn() 时,就已经改变了 this 的指向,同时得使用展开运算符传入参数
- delete context.fn 删除那个临时方法是因为已经不需要用了
7. 核心原理
通过在传入的对象上,临时新增一个方法,这个方法的值是当前 binCall 的调用者。然后 context.fn(...argArray) 调用这个函数,通过隐式绑定的方式改变了 this 的指向,最后得到结果并返回。
最新文章
- Grunt(页面静态引入的文件地址的改变探究)-V2.0
- 使用ASP.NET上传图片汇总
- Android 开发环境配置
- padding和margin的区别
- java程序打包成jar文件,使用到第三方jar包
- Super A^B mod C
- linux内核分析之fork()
- linux下 ls 排序
- Launchpad灰色图标怎么删除?重置Launchpad教程
- PAT (Advanced Level) 1092. To Buy or Not to Buy (20)
- Fraction to Recurring Decimal leetcode
- 使用Jexus 5.8.2在Centos下部署运行Asp.net core
- 团队作业8 ----第二次项目冲刺(Beta阶段)博客汇总
- django缓存、信号、序列化
- Filter 中空指针错误
- 20175236 《Java程序设计》实验一(Java开发环境的熟悉)实验报告
- CSS之Normalize.css的使用(重置表)
- VMware虚拟机上配置nginx后,本机无法访问问题(转载)
- angular2.0学习笔记4.npm常用指令记录及angular语法
- TCP/IP协议(3):数据链路层