剖析call、apply、bind原理，前端进阶之路的秘密武器

前端

2023-09-12 20:42:43

前言

在 JavaScript 中，函数 call、apply、bind 是三个非常重要的函数，它们可以改变函数的执行上下文，从而实现一些特殊的功能。对于前端开发工程师来说，理解这三个函数的原理和用法是非常重要的。

一、函数的执行上下文

在 JavaScript 中，函数的执行上下文是一个非常重要的概念。它决定了函数中的 this 指向什么对象，以及函数可以访问哪些变量。

函数的执行上下文在函数被调用时创建，并在函数执行完毕后销毁。执行上下文可以分为全局执行上下文和局部执行上下文。

全局执行上下文：在脚本文件的最外层创建，它包含了所有的全局变量和函数。
局部执行上下文：在函数被调用时创建，它包含了函数的参数、局部变量和函数内部声明的变量。

二、函数 call、apply、bind 的用法

1. 函数 call

函数 call() 方法调用一个函数，并将一个对象作为第一个参数传递给该函数。该对象成为函数的 this 值。

function greet(name) {
  console.log('Hello, ' + name);
}

greet.call({ name: 'John' }, 'Mary'); // 输出：Hello, Mary

2. 函数 apply

函数 apply() 方法与函数 call() 方法类似，但它接受一个数组作为第二个参数，该数组包含要传递给函数的参数。

function greet(name) {
  console.log('Hello, ' + name);
}

greet.apply({ name: 'John' }, ['Mary']); // 输出：Hello, Mary

3. 函数 bind

函数 bind() 方法创建一个新的函数，该函数与原始函数具有相同的代码，但它的 this 值被绑定到一个特定的对象。

function greet(name) {
  console.log('Hello, ' + name);
}

const boundGreet = greet.bind({ name: 'John' });

boundGreet('Mary'); // 输出：Hello, Mary

三、函数 call、apply、bind 的底层源码实现

1. 函数 call

Function.prototype.call = function(context, ...args) {
  if (typeof this !== 'function') {
    throw new TypeError('this is not a function');
  }

  context = context || window;
  context.fn = this;
  const result = context.fn(...args);
  delete context.fn;
  return result;
};

2. 函数 apply

Function.prototype.apply = function(context, args) {
  if (typeof this !== 'function') {
    throw new TypeError('this is not a function');
  }

  context = context || window;
  context.fn = this;
  const result = context.fn(...args);
  delete context.fn;
  return result;
};

3. 函数 bind

Function.prototype.bind = function(context, ...args) {
  if (typeof this !== 'function') {
    throw new TypeError('this is not a function');
  }

  const fn = this;
  return function(...bindArgs) {
    return fn.call(context, ...args, ...bindArgs);
  };
};

四、函数 call、apply、bind 的实际执行效果

1. 函数 call

function greet(name) {
  console.log('Hello, ' + name);
}

const person = {
  name: 'John'
};

greet.call(person, 'Mary'); // 输出：Hello, Mary

在上面的代码中，我们使用函数 call() 方法来调用函数 greet()。我们将 person 对象作为第一个参数传递给函数 call() 方法，并将字符串 'Mary' 作为第二个参数传递给函数 call() 方法。

当函数 greet() 被调用时，它的 this 值被设置为 person 对象。因此，函数 greet() 中的 name 变量的值为 'John'。

2. 函数 apply

function greet(name) {
  console.log('Hello, ' + name);
}

const person = {
  name: 'John'
};

greet.apply(person, ['Mary']); // 输出：Hello, Mary

在上面的代码中，我们使用函数 apply() 方法来调用函数 greet()。我们将 person 对象作为第一个参数传递给函数 apply() 方法，并将一个包含字符串 'Mary' 的数组作为第二个参数传递给函数 apply() 方法。

当函数 greet() 被调用时，它的 this 值被设置为 person 对象。因此，函数 greet() 中的 name 变量的值为 'John'。

3. 函数 bind

function greet(name) {
  console.log('Hello, ' + name);
}

const person = {
  name: 'John'
};

const boundGreet = greet.bind(person);

boundGreet('Mary'); // 输出：Hello, Mary