🎉 手写call的魔法冒险：前端开发者的“换身份”指南🚀

WildBlue
0 阅读3分钟

🔍 this的奇幻漂流：快递柜取件大法 📦

image.png

“雷军叫雷军？那特朗普也得叫Trump啊！” 😂

JavaScript中的this就像快递柜里的包裹：

  • 快递柜编号 → this的指向
  • 取件码 → 函数调用方式
  • 包裹内容 → 函数内部逻辑
function greeting() {
    return `Hello, I am ${this.name}`;
}
greeting.call({name: "雷军"}); // 雷军叫雷军？不，是this指向了雷军对象！

技术原理图解：
想象你在快递柜取包裹时，必须输入正确的编号（this绑定）。如果取件码错误（调用方式错误），包裹就取不到（函数执行失败）。

🛠️ 手写call的三步曲：程序员的“换装”秘籍 💃

image.png

“程序员相亲时，call方法让你‘见人说人话’！” 😄

Step 1: 给函数穿隐身衣（Symbol魔法） 💎

// 使用Symbol避免污染context对象
const fnKey = Symbol('fn'); 
context[fnKey] = this;

技术原理：Symbol创建唯一属性名，防止覆盖context的原有属性
坑点预警：如果不用Symbol，可能会导致属性名冲突！
真实call对比：原生call不会污染对象，我们得手动删除临时属性（delete context[fnKey]）

反例演示：

// 不用Symbol会导致属性覆盖
const fnKey = 'fn'; 
context[fnKey] = this; // 如果context原本有fn属性，会被覆盖！

Step 2: 参数传递大作战（单点 vs 套餐） 🍱

// myCall参数：单点式传递
greeting.myCall(obj, 5, 3); 

// apply参数：套餐式传递
greeting.apply(obj, [5, 3]);

类比：call像“点菜”，apply像“打包外卖”
坑点：参数类型错误会导致函数执行异常！
真实call对比：原生call/apply对参数类型校验更严格

代码注释穿插轻松对话：

// context为null？别慌，window来救场！（非严格模式）

Step 3: 清理战场（内存管理） 🧹

delete context[fnKey]; // 删除临时属性，避免内存泄漏

技术原理：及时清理“临时换的衣服”
反例演示：不删除属性会导致对象污染！
幽默解析：就像相亲后要记得把假发摘下来 😅

🎭 call/apply/bind三人行：谁才是时间管理大师？ 🕒

image.png

方法参数传递执行时机魔法效果
call单点式立即执行🚀 程序员相亲时的“临时换装”
apply套餐式立即执行🍱 程序员打包外卖式的参数传递
bind单点式延迟执行⏰ 程序员预约相亲的“定时炸弹”
// bind延迟执行案例：预约相亲
const delayedGreeting = greeting.bind(LJ, 18, '抚州');
setTimeout(delayedGreeting, 1000); // 1秒后雷军喊出“我来自抚州”

技术原理图解：
bind返回的新函数就像“预约券”，可以在任何时候使用（延迟执行）。

🚨 常见坑点大揭秘：别让this把你带沟里！ 🛑

image.png

  1. context为null？

    greeting.call(null); // 非严格模式下this指向window！

    反例演示：在浏览器中window.name可能是"Trump"，结果变成“Hello, I am Trump” 😂

  2. Symbol不隐身？

    const fnKey = 'fn'; // 普通字符串可能导致属性覆盖！

    技术原理：Symbol的唯一性保证属性名不重复
    幽默解析：就像给属性名穿隐身衣，别人看不见你也能用 💎

  3. 严格模式陷阱

    "use strict";
greeting.call(null); // 会抛出TypeError

    技术原理：严格模式下null/undefined作为this会报错
    坑点预警：生产环境务必注意模式差异！

🧩 实际案例：程序员相亲的魔法 💖

“用call方法切换身份，从程序员变成‘理想对象’！” 💫

// 情景1：程序员视角
function calculateLoveScore(music, cooking) {
    return `匹配度：(${this.music + music})+(${this.cooking + cooking})=${(this.music + music + this.cooking + cooking)/2}/20`;
}

const programmer = { music: 10, cooking: 8 };
const datee = { music: 7, cooking: 9 };

console.log(calculateLoveScore.myCall(programmer, 5, 3)); // 程序员视角
console.log(calculateLoveScore.myCall(datee, 4, 5));     // 对方视角

技术原理图解：
通过改变this指向，动态切换计算逻辑中的数据源（程序员 vs 对方），就像相亲时切换身份标签。

幽默解析：
“就像相亲时‘见人说人话’，call方法让你的函数随时换身份！但别忘了用Symbol，不然可能会‘撞衫’哦～” 😂

💡 写给未来的你：学习建议 & 延伸阅读 📚

  1. 推荐书籍：《你不知道的JavaScript》this绑定章节
  2. 实战演练：
  3. 学习技巧：
    • 用“快递柜取件”类比this绑定
    • 用“餐厅点餐”记忆参数传递差异
  4. 彩蛋：

    “下次面试被问this绑定，就用‘雷军叫雷军’的梗开场吧！确保HR记住你 😄”

🧪 进阶挑战：手写apply & bind

image.png

“真正的程序员，连apply和bind都能自己实现！” 💪

// 手写apply（套餐式参数）
Function.prototype.myApply = function(context, argsArray) {
    if (context === null || context === undefined) context = window;
    if (!Array.isArray(argsArray)) throw new TypeError("Argument must be array");
    const fnKey = Symbol('fn');
    context[fnKey] = this;
    const result = context[fnKey](...argsArray);
    delete context[fnKey];
    return result;
};

// 手写bind（延迟执行）
Function.prototype.myBind = function(context, ...args) {
    const fn = this;
    return function(...innerArgs) {
        return fn.call(context, ...args, ...innerArgs);
    };
};

技术原理图解：
apply和bind的实现本质上是call的变体，通过参数处理方式的不同（数组展开/延迟执行）实现差异化功能。

🧼 内存管理：别让临时属性成为“幽灵”

image.png

“程序员相亲后，别忘了还回去租的西装！” 😅

// 未删除临时属性的后果
const obj = {};
function test() { return this.key; }
test.myCall(obj, 'value');
console.log(obj); // { [Symbol(fn)]: [Function: test] } 仍然存在！

解决方案：
强制在函数执行后删除临时属性，避免对象污染。这是手写call/apply必须包含的清理步骤。

🧠 思维拓展：this绑定的本质

image.png

“this不是静态的，而是调用时的动态决定！” 🌪️

const obj = {
    name: '乡乡',
    sayName: function() {
        return this.name;
    }
};

const unbound = obj.sayName;
console.log(unbound()); // 非严格模式下返回window.name（可能为空字符串）

技术原理图解：
this的绑定发生在函数调用时，而不是定义时。这就是为什么解绑方法后，this会丢失。

📌 总结：call的终极价值

  1. 动态绑定：实现函数复用时的上下文切换
  2. 继承实现：父类构造函数调用（Parent.call(this)）
  3. 函数劫持：修改函数执行环境（如日志记录器）
  4. 参数扩展：配合apply实现参数数组化处理

终极建议：
掌握call/apply/bind不仅是面试需要，更是理解JavaScript函数本质的关键钥匙。下次遇到this绑定问题时，记得用“快递柜取件”和“餐厅点餐”来类比，编程将变得轻松愉快！ 🚀

avatar
文章
阅读
粉丝