深入探索JavaScript中的call/apply/bind：功能、原理和手写实现

2023-12-06 21:15:58

call和apply：函数调用的新天地

call和apply是JavaScript中非常有用的函数调用方法，它们允许我们改变函数的执行上下文，即函数中的this指向的对象。这在面向对象编程中非常有用，因为它可以让我们在不同的对象上调用同一个函数，而无需重新编写函数。

call和apply的使用方法非常相似，它们都接受两个参数：要调用的函数和一个this指向的对象。第一个参数可以是一个函数名，也可以是一个函数表达式或箭头函数。第二个参数必须是一个对象，它将作为函数中的this指向的对象。

例如，我们有一个函数名为greet，它接受一个name参数并返回一个问候语。我们可以使用call或apply方法来改变greet函数的this指向的对象。

function greet(name) {
  return `Hello, ${name}!`;
}

// 使用call方法改变函数的this指向的对象
const person = {
  name: 'John Doe'
};

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

// 使用apply方法改变函数的this指向的对象
console.log(greet.apply(person, ['Jane Doe'])); // Hello, Jane Doe!

call和apply的区别在于apply方法的第二个参数是一个数组，而call方法的第二个参数是一个逗号分隔的参数列表。

bind：函数调用的预绑定

bind方法与call和apply类似，它也可以改变函数的执行上下文，但bind方法返回一个新的函数，而不是直接执行函数。这个新的函数被称为绑定函数（bound function）。

bind方法的使用方法与call和apply方法非常相似，它也接受两个参数：要调用的函数和一个this指向的对象。第一个参数可以是一个函数名，也可以是一个函数表达式或箭头函数。第二个参数必须是一个对象，它将作为函数中的this指向的对象。

例如，我们仍然使用greet函数，我们可以使用bind方法来创建一个新的绑定函数，这个绑定函数的this指向对象是person对象。

function greet(name) {
  return `Hello, ${name}!`;
}

// 使用bind方法创建一个新的绑定函数
const boundGreet = greet.bind(person);

// 调用绑定函数
console.log(boundGreet('Jane Doe')); // Hello, Jane Doe!

绑定函数与普通函数的区别在于，绑定函数的this指向对象是预先绑定的，而普通函数的this指向对象是在函数调用时确定的。

原理：揭开call/apply/bind的神秘面纱

call、apply和bind方法的原理都非常简单，它们都是利用JavaScript中的闭包机制来实现的。闭包是指一个函数及其所在作用域内的变量的组合。闭包允许函数访问其所在作用域内的变量，即使函数已经执行完毕。

call、apply和bind方法都是通过创建一个闭包来实现的，这个闭包将函数的执行上下文绑定到指定的对象上。当我们调用call、apply或bind方法时，实际上就是调用了这个闭包。

手写实现：亲自动手实现call/apply/bind

call、apply和bind方法都是非常有用的函数调用方法，我们可以通过手写实现来更好地理解它们的原理。

手写实现call方法

Function.prototype.myCall = function(context, ...args) {
  if (typeof this !== 'function') {
    throw new TypeError('Error: Function.prototype.myCall can only be called on functions');
  }

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

手写实现apply方法

Function.prototype.myApply = function(context, args) {
  if (typeof this !== 'function') {
    throw new TypeError('Error: Function.prototype.myApply can only be called on functions');
  }

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

手写实现bind方法

Function.prototype.myBind = function(context, ...args) {
  if (typeof this !== 'function') {
    throw new TypeError('Error: Function.prototype.myBind can only be called on functions');
  }

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