JavaScript 中call和apply的详细讲解 —— 连10岁的小朋友都能看懂！-优快云博客

🌟 一、先搞清楚“函数”和“this”是什么

✅ 函数（Function）

函数就像一个“小机器人”，你告诉它做什么，它就去做。比如：

/* by yours.tools - online tools website : yours.tools/zh/formatcss.html */
function sayHi() {
  console.log("你好！");
}
sayHi(); // 输出：你好！

✅ this 是什么？

this 就像一个“遥控器”，指向当前正在使用这个函数的对象。

/* by yours.tools - online tools website : yours.tools/zh/formatcss.html */
const 小明 = {
  name: "小明",
  sayName: function() {
    console.log("我是" + this.name);
  }
};

小明.sayName(); // 输出：我是小明

这里的 this 指向“小明”这个对象。

🧩 二、问题来了：如果我想让“小红”也用“小明”的 sayName 函数怎么办？

这时候就需要 call 或 apply！它们的作用是：临时借用别人的函数，并指定“this”是谁。

🔍 三、call 的基本用法

📌 语法：

函数.call(新的this对象, 参数1, 参数2, ...)

👶 举个超简单的例子：

function greet() {
  console.log("你好，我是 " + this.name);
}

const 小明 = { name: "小明" };
const 小红 = { name: "小红" };

greet.call(小明); // 输出：你好，我是 小明
greet.call(小红); // 输出：你好，我是 小红

👉 call 把 greet 函数借给小明/小红用，并让 this 指向他们！

🔍 四、apply 的基本用法

📌 语法：

函数.apply(新的this对象, [参数数组])

注意：参数要用数组传进去！

👶 例子（带参数）：

function introduce(age, hobby) {
  console.log(`我是 ${this.name}，今年 ${age} 岁，喜欢 ${hobby}`);
}

const 小刚 = { name: "小刚" };

// 用 call：
introduce.call(小刚, 10, "打篮球");
// 输出：我是 小刚，今年 10 岁，喜欢 打篮球

// 用 apply（参数必须放数组里）：
introduce.apply(小刚, [10, "打篮球"]);
// 输出：我是 小刚，今年 10 岁，喜欢 打篮球

总结区别：

call：一个个写参数 → func.call(obj, a, b, c)
apply：把参数打包成数组 → func.apply(obj, [a, b, c])

... [省略了部分内容以保持简洁]

🎁 八、终极总结（一句话记住）

call 和 apply 就是“借函数 + 指定主人（this）”的魔法咒语！

用 call：参数一个个说。
用 apply：参数打包成数组说。

🧪 九、动手练习（试试看！）

function describe(color, size) {
  console.log(`${this.item} 是 ${color} 色，尺寸是 ${size}`);
}

const shirt = { item: "T恤" };
const hat = { item: "帽子" };

// 请用 call 和 apply 分别让 shirt 和 hat 描述自己！
describe.call(shirt, "红", "L");
describe.apply(hat, ["蓝", "M"]);

输出：

T恤 是 红 色，尺寸是 L
帽子 是 蓝 色，尺寸是 M

主要研究技术：Web开发、代码自动化

撰写人：史林枫 (qq：1326771967)

转载请注明出处