深入浅出通俗易懂！ES5引擎“call、bind、apply”方法解析

前端

2024-01-08 04:33:39

一波带走！从认识到手写call、bind、apply！

嗨，各位前端开发者，欢迎来到今天的技术探讨之旅！今天，我们要深入浅出地聊聊JavaScript引擎中call、bind、apply函数原型方法的用法和原理，让大家在轻松愉快的氛围中掌握这些高级的JavaScript知识点。

this理解它的真谛

在JavaScript中，this是一个非常重要的概念。它指向当前正在执行的函数或方法所属的对象。但是，this关键字的指向并不是一成不变的，它会根据不同的调用方式而改变。这也就是为什么this关键字有时会让人感到头痛的原因。

call、bind、apply：this指向的操盘手

为了解决this关键字指向不定的问题，JavaScript引擎提供了call、bind、apply这些函数原型方法。它们都可以改变this关键字的指向，从而让我们更好地控制函数或方法的执行环境。

call：直接调用，即刻执行

call方法是最简单直接的this指向修改方法。它接收两个参数：第一个参数是this关键字要指向的对象，第二个参数及以后的参数是要传递给函数或方法的参数。

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("John"); // Hello, John!

// 使用call方法改变this指向
greet.call(null, "Mary"); // Hello, Mary!

在上面的例子中，greet函数被直接调用时，this关键字指向window对象。而当我们使用call方法改变this指向后，this关键字就指向了null对象。因此，greet函数被调用时，它向控制台输出了"Hello, Mary!"。

bind：函数柯里化，预先绑定

bind方法与call方法类似，但它不会立即执行函数或方法。相反，它会返回一个新的函数，这个新函数的this关键字已经被预先绑定到了指定的对象上。

function greet(name) {
  console.log(`Hello, ${name}!`);
}

const boundGreet = greet.bind(null);

boundGreet("John"); // Hello, John!

在上面的例子中，我们使用bind方法将greet函数的this关键字预先绑定到了null对象上，然后将返回的新函数boundGreet赋给了一个变量。当我们调用boundGreet函数时，this关键字就已经被绑定到了null对象上，因此它向控制台输出了"Hello, John!"。

apply：参数数组，一次性传递

apply方法与call方法类似，但它接收的参数列表是一个数组。这使得我们能够一次性地传递多个参数给函数或方法。

function sum(a, b, c) {
  return a + b + c;
}

const args = [1, 2, 3];

sum(...args); // 6

// 使用apply方法一次性传递参数
sum.apply(null, args); // 6

在上面的例子中，sum函数接收三个参数。当我们直接调用sum函数时，我们需要将三个参数分别传递给它。而当我们使用apply方法一次性传递参数时，只需要将参数数组args作为apply方法的第二个参数即可。

手写call、bind、apply：从原理到实现

理解了call、bind、apply函数原型方法的用法和原理后，我们就可以尝试自己动手实现它们了。这不仅可以加深我们对它们的理解，还可以让我们更好地掌握JavaScript的底层机制。

手写call方法

Function.prototype.myCall = function (context, ...args) {
  context = context || window;
  context.fn = this;
  const result = context.fn(...args);
  delete context.fn;
  return result;
};

手写bind方法

Function.prototype.myBind = function (context, ...args) {
  const fn = this;
  return function (...bindArgs) {
    return fn.myCall(context, ...args, ...bindArgs);
  };
};

手写apply方法

Function.prototype.myApply = function (context, args) {
  context = context || window;
  context.fn = this;
  const result = context.fn(...args);
  delete context.fn;
  return result;
};