Javascript中call和apply函数的比较和使用实例

介绍

在 JavaScript 中，我们可以使用 call 和 apply 函数来改变函数运行时的上下文环境（this指向）以及传递函数所需的参数。call 和 apply 的作用类似，不同之处在于传参方式的不同。

call 函数传入的参数可以是多个单独的参数，而 apply 函数传入的参数必须是一个数组。

语法

函数.call(执行上下文, arg1, arg2, ...)

函数.apply(执行上下文, [arg1, arg2, ...])

示例1

下面是一个简单的示例，在使用 call 函数改变函数上下文时，call 函数会将第一个参数指向函数内部的 this 关键字。

代码如下所示：

let obj = {
  name: 'Amy'
};

function sayHello(message) {
  console.log(`${message}, my name is ${this.name}.`);
}

sayHello.call(obj, 'Hi');
// 输出：Hi, my name is Amy.

在这个示例中，我们首先定义了一个对象 obj，它有一个属性 name。然后，我们定义了一个 sayHello 函数，它带有一个 message 参数（要打印的消息）。在函数体内部，我们使用 this 名称引用了 obj 对象的 name 属性。然后，我们使用 call 函数将对象 obj 作为 this 环境传递给 sayHello 函数。

通过这个方法，我们实现了在 sayHello 函数内部访问 obj 对象的 name 属性。最终，在执行 sayHello 函数时，将得到打印消息：Hi, my name is Amy.。

示例2

下面是一个使用 apply 函数动态传递函数参数的示例。

代码如下所示：

function greeting(msg, arr) {
  console.log(msg + ', ' + arr.join(', '));
}

let hobbies = ['reading', 'swimming', 'coding'];
greeting.apply(null, ['My hobbies are', hobbies]);
// 输出：My hobbies are, reading, swimming, coding

在这个示例中，我们定义了一个 greeting 函数，其中接受一个 msg 参数和一个 arr 数组参数，并在函数内部打印它们。我们还定义了一个 hobbies 数组，表示个人的兴趣爱好。

然后，我们使用 apply 函数将我们的 hobbies 数组，先传递给 apply 函数的第二个参数 argArray（[‘My hobbies are’, hobbies]），由于 apply 是第一个参数为传递的对象，这个函数内部并不会使用到，所以传递了 null 值，最终我们可以在控制台上看到打印消息：My hobbies are, reading, swimming, coding。

总结

call 和 apply 等函数的优势在于它们让我们能够动态地更改函数调用时的上下文，即 this 关键字。使用这两个函数可以让我们在处理不同情况的过程中获得代码重用、简化编程的好处。