惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

A
About on SuperTechFans
量子位
Apple Machine Learning Research
Apple Machine Learning Research
博客园 - 聂微东
V
Visual Studio Blog
小众软件
小众软件
Hugging Face - Blog
Hugging Face - Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
博客园 - 司徒正美
V
V2EX
The GitHub Blog
The GitHub Blog
博客园_首页
月光博客
月光博客
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
MyScale Blog
MyScale Blog
博客园 - 叶小钗
F
Fortinet All Blogs
T
Tailwind CSS Blog
GbyAI
GbyAI
酷 壳 – CoolShell
酷 壳 – CoolShell
IT之家
IT之家
WordPress大学
WordPress大学
B
Blog
H
Help Net Security

韩小韩博客

你还在用真实邮箱注册网站?等等,你真的想清楚了吗? IPFS星际文件系统 最新二合一收款码 - 物理合并版 从Hexo到Astro博客1分钟迁移指南 Astro 添加 Waline 评论组件 腾讯云 EdgeOne Pages 实测对比:能否成为国内开发者的 Cloudflare Pages 最佳平替? Astro 中使用 Lenis 增加鼠标滚动阻尼感 一组手机和电脑动态壁纸分享【分享】 Astro 添加 Twikoo 评论组件 Astro主题-优雅的vhAstro-Theme【使用文档】 Fetch的GET、POST简单HTTP请求封装 一些实拍的手机壁纸 大理And威海【图】 很喜欢西湖的水【转自:狮子狮子鱼】 Tarot-塔罗牌占卜 Web Watermark 图片添加水印在线小助手 HanAnalytics访问分析Web统计托管于(Cloudflare Pages) 基于AI的微博动态心情分析 阿里云免费用9年ecs教程【适合轻量化服务如frp】 Cloudflare优选IP➕DnsPod的DDNS自动切换 混沌神器Clash全家桶 卷王都在用的变态休息法 NodeJs文本相似度去重脚本 骤雨重山无限存储图床托管于(Cloudflare Pages) 分享好看的天空和云(长期更新) Typecho转到Hexo(主题由Typecho-Joe-Theme转Butterfly主题) Typecho评论导出为Hexo的Valine、Twikoo等评论所支持的JSON文件 Safari浏览器内容被地址栏、菜单栏或工具栏遮挡导致的兼容问题 拼夕夕快速提现100元攻略 2024 平安喜乐
手撸call apply bind
.𝙃𝙖𝙣 · 2026-04-11 · via 韩小韩博客

avatar

.𝙃𝙖𝙣

469 2.3分钟

Daily

如果自己去实现call apply bind,看上去挺复杂,写起来其实就几行代码 因为call和apply一样,只是传参不一样,所以我就只写一个call

实现call(其实只有2行代码)

/* 随便定义一个对象,待会将函数内的this指向指向倒这个对象 */
const obj = { name: "我是需要被绑定改变this指向的对象" };
/* 需要改变this指向的函数,没有使用call时,this指向window */
function fn(arg) {
  console.log("fn---------", this);
  console.log("fn---------", arg);
}
/*
 *
 * 重写call方法
 * target 需要把this改变到哪个目标
 * args 传递进来的参数
 */
Function.prototype.call = function (target, ...args) {
  /* 这里的this就指向上面的fn函数 */
  console.log(this);
  /* 随便定义一个变量,用于在目标对象里存fn函数,这里使用symbol更好 */
  target["vhan"] = this;
  /* 这样target目标上就有个vhan的属性,并且属性值就是fn函数 */
  console.log(target);
  /* 调用这个vhan,并把参数传入进去就实现this改变了 */
  target["vhan"](args);
  /* 防止给target上多出多余没用的参数,在将vhan删除掉 */
  delete target["vhan"];
};
fn.call(obj, "我是大帅哥");

实现bind

因为bind的调用方式,是返回一个新函数,在调用一次,例如:fn.bind(null)(options),所以需要用到高阶函数

/* 随便定义一个对象,待会将函数内的this指向指向倒这个对象 */
const obj = { name: "我是需要被绑定改变this指向的对象" };
/* 需要改变this指向的函数,没有使用call时,this指向window */
function fn(arg) {
  console.log("fn---------", this);
  console.log("fn---------", arg);
}
/*
 *
 * 重写call方法
 * target 需要把this改变到哪个目标
 * args 传递进来的参数
 */
Function.prototype.bind = function (target) {
  target["vhan"] = this;
  /* 这里使用高阶函数接收参数 */
  return (...args) => {
    target["vhan"](args);
    delete target["vhan"];
  };
};
fn.bind(obj)("我是大帅哥!!!");
Javascript call apply bind