尧图网站建设 尧图网络
  • 首页
  • 关于我们
  • 服务项目
  • 案例展示
  • 建站流程
  • 资讯中心
  • 联系我们
首页/资讯中心/详情

【前端手撕】call

【前端手撕】call
📅 发布时间:2026/7/11 5:14:55

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被覆盖了。

相关新闻

  • 构建 Agent Harness:打造可靠 AI Agent 的核心控制层
  • 蓝牙+WiFi 融合产品调研:智能体脂秤
  • 检查unionid是否所属当前钉钉企业/组织架构

最新新闻

  • Unity游戏实时NPC语音生成:基于IndexTTS的本地化集成方案
  • Python OpenCV 图像处理:阈值分割详解与实战
  • 面向海量视频数据的智能存储优化技术研究:AI驱动的视频空间压缩方法与应用探索
  • 2026桃心云手机深度实测 内置AI安卓云机全功能测评
  • 面向俄 CRPT 监管的诚实标签全链路采集关联系统技术方案 —— 兴通一体化软硬件实现赋码采集与合规文件输出
  • 主流国产数据库:体验便利度

日新闻

  • OpenClaw本地部署:一键直连微信的私有化AI Agent实战指南
  • Kubernetes 系列【10】控制器:ReplicaSet(副本集)
  • 怎么寄快递才能便宜呢?2026年7月寄快递省钱攻略 - 生活情报姬

周新闻

  • 基于YOLOv12的番茄成熟度智能检测系统开发
  • 终极RimWorld模组管理指南:用RimSort告别模组冲突烦恼
  • AI Agent框架开发:从理论到实践的完整指南

月新闻

  • 2026年6月公司网站搭建最新热门渠道测评:四大低成本/零代码平台对比+避坑
  • 【Linux】Linux arm 编译QT程序,出现expected “}“报错
  • 【MATLAB例程】四基站二维AOA定位与距离辅助增强对比仿真。基于角度观测和测距修正的固定目标平面定位精度分析

关于尧图

  • 公司简介
  • 团队介绍
  • 企业文化
  • 荣誉资质

服务项目

  • 定制开发
  • 电商建站
  • UI 设计
  • 运维服务

快速链接

  • 案例展示
  • 建站流程
  • 常见问题
  • 资讯中心

联系方式

  • 📍北京市朝阳区互联网产业园 A 座 10 层
  • 📞400-888-8888
  • ✉️contact@rkmt.cn
  • 🕐周一至周日 9:00-21:00

© 2024 北京尧图网络科技有限公司 版权所有 | 京 ICP 备 XXXXXXXX 号