JavaScript 中 call 和 apply 的用法与区别

---

前言

在 JavaScript 中，call 和 apply 是两个非常重要的函数方法，它们都用于改变函数实行时的 this 指向。虽然它们的功能相似，但在使用方式上有一些区别。本文将详细先容 call 和 apply 的用法及其区别。

---

一、 call 方法

1.1 根本用法

call 方法允许你调用一个函数，并且可以指定函数实行时的 this 值。call 方法的第一个参数是 this 值，背面的参数是通报给函数的参数列表。

1. function greet(message) {
2.     console.log(message + ', ' + this.name);
3. }
4. const person = {
5.     name: 'Alice'
6. };
7. greet.call(person, 'Hello'); // 输出: Hello, Alice

复制代码

在上面的例子中，greet 函数通过 call 方法调用，this 被绑定到 person 对象，因此 this.name 输出 Alice。
1.2 通报多个参数

call 方法可以通报多个参数，这些参数会按序次通报给函数。

1. function introduce(greeting, punctuation) {
2.     console.log(greeting + ', ' + this.name + punctuation);
3. }
4. const person = {
5.     name: 'Bob'
6. };
7. introduce.call(person, 'Hi', '!'); // 输出: Hi, Bob!

复制代码

二、apply 方法

2.1 根本用法

apply 方法与 call 方法类似，也是用于改变函数实行时的 this 指向。差异的是，apply 方法的第二个参数是一个数组（或类数组对象），数组中的元素会作为参数通报给函数。

1. function greet(message) {
2.     console.log(message + ', ' + this.name);
3. }
4. const person = {
5.     name: 'Alice'
6. };
7. greet.apply(person, ['Hello']); // 输出: Hello, Alice

复制代码

2.2 通报数组参数

apply 方法特殊得当在参数数量不确定的情况下使用，由于你可以直接将参数放在一个数组中通报。

1. function introduce(greeting, punctuation) {
2.     console.log(greeting + ', ' + this.name + punctuation);
3. }
4. const person = {
5.     name: 'Bob'
6. };
7. introduce.apply(person, ['Hi', '!']); // 输出: Hi, Bob!

复制代码

三、call 和 apply 的区别

虽然 call 和 apply 的功能相似，但它们在使用上有以下区别：

• 参数通报方式差异：call 方法担当的是一个参数列表，而 apply 方法担当的是一个参数数组。
  

1. func.call(thisArg, arg1, arg2, ...);
2. func.apply(thisArg, [arg1, arg2, ...]);

复制代码

• 实用场景差异：当参数数量固定时，通常使用 call；当参数数量不固定时，使用 apply 更为方便。
  

四、现实应用场景

4.1 借用方法

call 和 apply 常用于借用其他对象的方法。比方，借用数组的 slice 方法将类数组对象转换为真正的数组。

1. function convertToArray() {
2.     return Array.prototype.slice.call(arguments);
3. }
4. const arr = convertToArray(1, 2, 3);
5. console.log(arr); // 输出: [1, 2, 3]

复制代码

4.2 继承与构造函数

在实现继承时，call 和 apply 可以用于调用父类的构造函数。

1. function Parent(name) {
2.     this.name = name;
3. }
4. function Child(name, age) {
5.     Parent.call(this, name);
6.     this.age = age;
7. }
8. const child = new Child('Alice', 10);
9. console.log(child.name); // 输出: Alice
10. console.log(child.age);  // 输出: 10

复制代码

五、总结

call 和 apply 都用于改变函数实行时的 this 指向。
call 担当参数列表，apply 担当参数数组。
根据参数的数量和形式选择合适的调用方式。
掌握 call 和 apply 的使用，能够让你在 JavaScript 中更加灵活地控制函数的实行上下文，提升代码的复用性和可维护性。

---

希望这篇文章对你理解 JavaScript 中的 call 和 apply 有所资助！如果你有任何问题或建议，欢迎在评论区留言讨论。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。