JavaScript - Function call() 方法

你好啊，未来的编程巨星！今天，我们将深入了解JavaScript的一个小巧实用的技巧：call() 方法。如果你是编程新手，不用担心；我会一步一步地引导你，就像我多年来为无数学生所做的那样。那么，拿起你最喜欢的饮料，让我们一起踏上这段激动人心的冒险之旅吧！

JavaScript - Function call()

Function call() 方法是什么？

在我们深入研究call()方法之前，让我们快速回顾一下函数的相关知识。在JavaScript中，函数就像执行特定任务的小机器。它们非常有用，一旦你掌握了它们，你会发现自己时刻都在使用它们！

现在，call()方法就是函数拥有的一个特殊超能力。它允许我们调用（或执行）一个函数，并指定函数内部的this关键字应该指向什么。如果这听起来有点令人困惑，别担心！我们会通过一些例子来分解它。

语法

下面是call()方法的样子：

functionName.call(thisArg, arg1, arg2, ...)

functionName 是我们要调用的函数。
thisArg 是我们希望函数内部的this指向的对象。
arg1, arg2, ... 是我们想要传递给函数的参数。

Function call() 方法的例子

让我们通过一些例子来看看call()是如何工作的！

示例 1：基本用法

function greet() {
console.log(`你好，我的名字是 ${this.name}！`);
}

const person = { name: 'Alice' };

greet.call(person);

如果你运行这段代码，你会看到：

你好，我的名字是 Alice！

这里发生了什么？我们使用call()来调用greet函数，但我们告诉它使用person作为this。所以当函数尝试访问this.name时，它实际上访问的是person.name。

示例 2：传递参数

function introduce(hobby, food) {
console.log(`嗨，我是 ${this.name}。我喜欢 ${hobby}，我最喜欢的食物是 ${food}。`);
}

const person1 = { name: 'Bob' };
const person2 = { name: 'Carol' };

introduce.call(person1, '编程', '披萨');
introduce.call(person2, '画画', '寿司');

这将输出：

嗨，我是 Bob。我喜欢编程，我最喜欢的食物是披萨。
嗨，我是 Carol。我喜欢画画，我最喜欢的食物是寿司。

在这个例子中，我们不仅指定了this应该是什么，还向函数传递了参数。call()方法允许我们同时做到这两点！

示例 3：借用方法

call()最酷的事情之一就是它允许我们“借用”其他对象的方法。让我给你展示一下我的意思：

const calculator = {
multiply: function(a, b) {
return a * b;
}
};

const scientific = {
square: function() {
return this.multiply(this.number, this.number);
},
number: 5
};

console.log(scientific.square.call(scientific));  // 这按预期工作
console.log(calculator.multiply.call(scientific, scientific.number, scientific.number));  // 这借用了multiply方法

输出：

25
25

在这个例子中，我们从calculator对象借用了multiply方法，并在scientific对象的上下文中使用它。相当酷，对吧？

示例 4：使用 call() 与内置方法

你知道吗，我们甚至可以使用call()与JavaScript的内置方法？来看看这个：

const numbers = [1, 2, 3, 4, 5];
const max = Math.max.call(null, ...numbers);
console.log(max);  // 输出：5

在这里，我们使用call()与Math.max()。null参数是因为Math.max()不使用this，而我们用扩展运算符将numbers数组作为单独的参数传递。

与 call() 相关的方法

为了给你一个完整的画面，让我们看看一些与call()相关的方法：

方法	描述	语法
`call()`	调用一个函数，给定`this`值和单独提供的参数	`func.call(thisArg, arg1, arg2, ...)`
`apply()`	与`call()`类似，但参数以数组的形式传递	`func.apply(thisArg, [argsArray])`
`bind()`	创建一个新函数，具有固定的`this`值	`func.bind(thisArg, arg1, arg2, ...)`

每个方法都有其用例，但当你知道要传递的确切参数时，call()通常是最直接的。

结论

亲爱的学生们，到此为止，我们已经从上到下探索了call()方法。记住，call()就像一根魔杖，让你可以控制函数内部的this含义，并允许你从其他对象借用方法。

和编程中的所有事物一样，熟能生巧。所以不要害怕在你的代码中尝试call()。谁知道呢？你可能会发现自己比想象中更频繁地调用call()！

继续编程，继续学习，并记住：在JavaScript的世界里，你总是只需一个call()就能解锁新的可能性！

Credits: Image by storyset

上一教程:

JavaScript - 函数调用

下一教程:

JavaScript - Function apply()