透过call、apply、bind 看透函数执行机制

2023-10-09 05:22:07

call、apply、bind 的异曲同工之妙 #

[面向面试官们深度阐述它们内在的一致性]

在 JavaScript 的世界中，函数执行机制是一块颇具深度的知识领域，想要进阶成为一名资深开发者，对 call、apply、bind 这三驾马车了如指掌是必不可少的。它们可以让我们灵活地操纵函数的执行上下文，实现一些看似不可能的任务。本文将通过深入剖析这三个函数的异曲同工之处，为你揭开函数执行机制的神秘面纱。

异曲同工，殊途同归

函数执行上下文

函数执行上下文是函数执行时创建的一个临时环境，其中包含了函数的参数、局部变量、以及指向当前执行函数的 this 指针。在 JavaScript 中，函数执行上下文分为全局执行上下文和局部执行上下文。全局执行上下文是在脚本执行开始时创建的，而局部执行上下文是在函数被调用时创建的。

call、apply、bind 这三个函数都能够改变函数的执行上下文。它们可以指定函数执行时所处的 this 指针，并传入不同的参数。这样，我们就可以在不同的对象上调用函数，或者使用不同的参数调用函数。

参数传递

在 JavaScript 中，函数的参数是通过值传递的。这意味着当函数被调用时，参数的副本被传递给函数，而不会影响到原始参数的值。然而，call、apply、bind 这三个函数都支持按引用传递参数。这意味着当函数被调用时，参数的引用被传递给函数，函数可以修改参数的值，而这些修改也会反映到原始参数中。

call、apply、bind 这三个函数的参数传递方式有所不同。call 函数的第一个参数是指定函数执行时所处的 this 指针，后面的参数是传递给函数的参数。apply 函数的第一个参数也是指定函数执行时所处的 this 指针，第二个参数是一个数组，数组中的元素是传递给函数的参数。bind 函数的第一个参数是指定函数执行时所处的 this 指针，后面的参数是传递给函数的参数，但 bind 函数不会立即调用函数，而是返回一个新的函数，这个新的函数可以稍后被调用。

举一反三，融会贯通

实例详解

为了更好地理解 call、apply、bind 这三个函数的使用方法，我们来看几个实例。

// 使用 call() 方法
function greet(name) {
  console.log(`Hello, ${name}!`);
}

const person = {
  name: 'John Doe'
};

greet.call(person, 'Jane Doe'); // Hello, Jane Doe!

在这个例子中，我们使用 call() 方法来改变 greet 函数的执行上下文。我们把 person 对象作为 call() 方法的第一个参数，这使得 greet 函数在 person 对象上执行。这样，当我们调用 greet 函数时，this 指针指向 person 对象，并且我们可以使用 person 对象的属性和方法。

// 使用 apply() 方法
function sum(a, b) {
  return a + b;
}

const numbers = [1, 2, 3, 4, 5];

const result = sum.apply(null, numbers); // 15

在这个例子中，我们使用 apply() 方法来传入一个数组作为参数。我们把 null 作为 apply() 方法的第一个参数，这使得 sum 函数在全局执行上下文中执行。这样，当我们调用 sum 函数时，this 指针指向全局对象，并且我们可以使用数组 numbers 作为参数。

// 使用 bind() 方法
function greet(name) {
  console.log(`Hello, ${name}!`);
}

const person = {
  name: 'John Doe'
};

const boundGreet = greet.bind(person);

boundGreet('Jane Doe'); // Hello, Jane Doe!

在这个例子中，我们使用 bind() 方法来创建一个新的函数，这个新的函数在 person 对象上执行。我们把 person 对象作为 bind() 方法的第一个参数，这使得 boundGreet 函数在 person 对象上执行。这样，当我们调用 boundGreet 函数时，this 指针指向 person 对象，并且我们可以使用 person 对象的属性和方法。