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

【前端手撕】call

call是改变this指向的方法,传入的参数是要指向的对象和函数需要的参数序列。

改变this指向还可以用apply和bind,区别如下:

方法传参方式执行时机返回值
call参数序列(逐个传入)立即执行函数执行的结果
apply参数数组(或类数组)立即执行函数执行的结果
bind参数序列(逐个传入)返回新函数,稍后执行绑定了this的新函数

代码

简易版

Function.prototype.callSimple = function (context, ...args) { context = context || window // 确认上下文,如果没有上下文就默认window context.fn = this // 把当前函数赋值给上下文的fn属性(临时属性) const res = context.fn(...args) // 调用函数,传参 delete context.fn // 删除临时属性 return res }

健壮版

Function.prototype.call = function (context, ...args) { // 如果上下文是null或undefined,就默认window;否则用Object()转换为对象 // Object()包对象返回原对象,包原始类型返回对象包装类型。这是因为简单数据类型不能挂载属性,对象才可以 context = context !== null && context !== undefined ? Object(context) : window let tag = Symbol('call') // Symbol()创建一个唯一的符号值,避免与其他属性冲突/覆盖 context[tag] = this // 把当前函数赋值给上下文的tag属性(临时属性) const res = context[tag](...args) // 调用函数,传参。这里使用方括号是因为tag是一个符号值,不能用点号 return res }

Tips

1. bind传参数可以先传一部分参数,返回新函数,下次再传剩下的。这种特性叫函数柯里化(Currying)

2. 如果bind返回的新函数被new构造调用了,this会失效。因为new的优先级高于bind(但也只有new比bind高)

function Person(name) { this.name = name; } const BoundPerson = Person.bind({ name: '默认' }); // 试图绑定 this const p = new BoundPerson('李四'); console.log(p.name); // 输出:李四

因为new强行创建了一个新对象作为this,bind绑定的this被覆盖了。

http://www.rkmt.cn/news/1544991.html

相关文章:

  • 构建 Agent Harness:打造可靠 AI Agent 的核心控制层
  • 蓝牙+WiFi 融合产品调研:智能体脂秤
  • 检查unionid是否所属当前钉钉企业/组织架构
  • 摩托车托运哪家便宜又靠谱?选这几点避坑 - 快递物流资讯
  • BaiduPCS-Go命令行工具:彻底解决百度网盘管理难题的高效方案
  • 拒绝断货焦虑!拥有大库存量的Nitronic60不锈钢厂商推荐 - 品牌2026
  • Gemini Pro 2026实操指南:普通人如何用提示工程+本地化实现AI深度协作
  • NXP MC33771 BMS评估板硬件配置与调试实战指南
  • 深度学习入门完全指南:用Deeplearning4j-examples快速掌握Java深度学习
  • 1N6506二极管阵列深度解析:从ESD保护到高速开关的实战应用
  • 从零上手经典8位MCU评估板:硬件调试与CodeWarrior开发全流程
  • AI-Scientist:10分钟自动化科研工作流,让LLM为你完成科学发现全流程
  • 3步实现智能企业研究:用Agent技能精准洞察市场机会
  • DeBERTa-v3-base-prompt-injection-v2:企业级大语言模型安全防护解决方案
  • ZigBee ZDP API实战:设备发现与绑定管理核心机制解析
  • 2026马桶半夜反水怎么办?24小时义乌管道疏通应急服务排行榜 - 极速版本
  • 手把手搭建本地RAG问答系统:PDF/Word文档智能检索实战
  • 实例分享:三种算法的实际应用
  • 数字电路模拟blog
  • 2026年天津劳动律师实力对比 5位资深律师各有专长 - 本地品牌推荐
  • 2026年近期上海餐饮业如何选择好的牛油火锅红油定制厂家 - 品牌鉴赏官2026
  • 2026豆包AI视频课:零基础+配套素材+实操闭环
  • imx6ull: 基于Buildroot定制化构建,集成FFmpeg与Nginx-RTMP的嵌入式流媒体服务器实践
  • FIFA 23 Live Editor终极指南:免费开源修改器深度解析与使用教程
  • 2026年天津离婚律师推荐 赵毓丽8年婚姻家事实战经验 - 本地品牌推荐
  • 5分钟快速上手Gopeed:一款全平台多协议下载器的终极选择
  • 构建之法阅读笔记 11
  • 2026年更新:探寻南海地区信誉与实力兼备的阳台封窗厂家可靠之选 - 品牌鉴赏官2026
  • 【AI测试智能体】拒绝玄学调参!我用 30 次真实 LLM 调用,拆解了 Agent 性能崩盘的 3 个维度
  • ZigBee HA设备结构体:智能家居设备开发的核心数据模型