理解JS函数之call,apply,bind

2023-02-24 18:12 由 CodeForBetter 发表于 #前端开发

前言

在 JavaScript 中，apply、bind 和 call 是三个重要的函数，它们都是 Function.prototype 的方法。这些函数可以让我们动态地改变函数的 this 值，或者传递参数来执行函数。本篇博客将详细介绍 apply、bind 和 call 的使用方法以及它们之间的区别。

apply

apply() 方法是 Function.prototype 上的一个方法，可以用于改变函数的 this 值。它接受两个参数：第一个参数是要绑定的 this 值，第二个参数是一个数组，其中包含要传递给函数的参数。apply() 方法会立即执行函数。


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

const numbers = [1, 2, 3];

const result = addNumbers.apply(null, numbers);
console.log(result); // 输出 6

在上面的例子中，我们定义了一个 addNumbers() 函数，它接受三个参数并返回它们的和。然后，我们定义了一个数组 numbers，其中包含要传递给 addNumbers() 函数的参数。我们使用 apply() 方法将数组作为参数传递给函数，并将 this 值设置为 null。最后，我们打印出 addNumbers() 函数的返回值。

call

call() 方法和 apply() 方法非常相似，但是它的参数不是数组，而是一个一个传递的。call() 方法也可以用于改变函数的 this 值。

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

greet.call(null, 'Alice'); // 输出 "Hello, Alice!"

在上面的例子中，我们定义了一个 greet() 函数，它接受一个参数 name，并在控制台中输出一条欢迎信息。我们使用 call() 方法将 this 值设置为 null，并将要传递给函数的参数一个一个地传递。

bind

bind() 方法和 apply() 方法和 call() 方法有些不同。它不会立即执行函数，而是返回一个新的函数，这个函数的 this 值已经被改变了。我们可以在之后的任何时候调用这个函数。并且传递的部分参数也可在后面使用。

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, my name is ${this.name}!`);
  }
};

const greetAlice = person.greet.bind(person);
greetAlice(); // 输出 "Hello, my name is Alice!"

在上面的例子中，我们定义了一个 person 对象，其中包含一个 greet() 方法。然后，我们使用 bind() 方法创建一个新的函数 greetAlice，并将 person 对象作为 this 值绑定。最后，我们调用 greetAlice() 函数，它会输出 "Hello, my name is Alice!"。

apply()、call() 和 bind() 的区别

apply()、call() 和 bind()三个方法之间的最大区别在于它们传递参数的方式以及它们是否是立即执行函数：

apply() 和 call() 方法立即执行函数并且传递参数的方式不同。
apply() 方法传递一个数组作为参数，而 call() 方法一个个传递参数。
bind() 方法不会立即执行函数，而是返回一个新的函数，这个函数的 this 值已经被绑定了。

在使用这些方法时，我们需要理解它们之间的区别，并根据具体情况进行选择。如果我们想要立即执行一个函数并传递一个数组作为参数，那么应该使用 apply() 方法。如果我们想要立即执行一个函数并逐个传递参数，那么应该使用 call() 方法。如果我们想要创建一个新的函数并绑定 this 值，那么应该使用 bind() 方法。

此外，在使用 apply()、call() 和 bind() 方法时，我们需要注意传递的 this 值和参数是否正确。如果我们不传递 this 值或传递一个错误的 this 值，那么函数可能无法正确地执行。同样，如果我们没有正确地传递参数，那么函数的结果也可能会出现错误。

内部机制

了解这些方法的内部机制可以帮助我们更好地理解它们的使用方式。在 JavaScript 中，函数是对象，因此每个函数都有一个 prototype 对象。当我们创建一个函数时，它会自动创建一个 prototype 对象，并将该对象的 constructor 属性设置为函数本身。

apply()、call() 和 bind() 方法都是在 Function.prototype 上定义的(每个函数都是 Function 对象的实例)，因此每个函数都可以使用它们。当我们调用 apply() 或 call() 方法时，JavaScript 引擎会将 this 值设置为传递给方法的第一个参数，并将要传递给函数的参数作为数组或单个参数传递。当我们调用 bind() 方法时，它会返回一个新的函数，并将 this 值设置为绑定的值。

下面是 apply() 方法的一个简单实现：

Function.prototype.myApply = function(thisArg, args) {
  // 首先判断调用 myApply() 方法的对象是否为函数
  if (typeof this !== 'function') {
    throw new TypeError('Function.prototype.myApply called on non-function');
  }
  
  // 如果 thisArg 为 null 或 undefined，则将其设置为全局对象
  if (thisArg === null || thisArg === undefined) {
    thisArg = window;
  }

  // 将函数设置为 thisArg 的方法，以便在 thisArg 上调用它
  thisArg.__myApply__ = this;

  // 执行函数并获取结果
  const result = thisArg.__myApply__(...args);

  // 删除在 thisArg 上设置的方法
  delete thisArg.__myApply__;

  // 返回函数的执行结果
  return result;
};

call() 方法的实现机制与 apply() 方法类似，只是在调用函数时将参数传递给函数的方式有所不同。call() 方法的实现如下：


Function.prototype.myCall = function(thisArg, ...args) {
  // ... 如上 只是参数需要用...rest 展开

};

bind() 方法的实现机制稍微有些不同。bind() 方法会创建一个新的函数，并将原函数的 this 值绑定到指定的对象上。当新函数被调用时，它会将绑定的 this 值传递给原函数，并将任何附加的参数一并传递。bind() 方法的实现如下：

Function.prototype.myBind = function(thisArg, ...args) {
  // 首先判断调用 myBind() 方法的对象是否为函数
  if (typeof this !== 'function') {
    throw new TypeError('Function.prototype.myBind called on non-function');
  }

  // 保存原函数的引用
  const originalFunc = this;

  // 返回一个新函数
  return function boundFunc(...newArgs) {
    // 将 this 值设置为 thisArg，并调用原函数
    return originalFunc.apply(thisArg, [...args, ...newArgs]);
    };
};

这里，我们通过使用剩余参数和展开语法来处理任意数量的传递参数，同时使用 apply() 方法将绑定的 this 值和所有参数传递给原函数。

需要注意的是，这里的 bind() 方法是定义在 Function 的原型上的。这意味着，所有的函数都可以调用这个方法，并将其绑定到需要的对象上。

值得一提的是，bind() 方法在绑定 this 值的同时，还可以通过将附加参数传递给新函数来“柯里化”函数。也就是说，通过预先绑定部分参数，我们可以创建一个新函数，这个函数接受剩余的参数，并在调用原函数时将这些参数一并传递。这个技巧在实际开发中经常用到，可以帮助我们简化代码，并提高代码的可读性。

以上是 apply()、call() 和 bind() 方法的手动实现方式，当然，JavaScript 中的这些方法已经预先实现好了，我们只需要使用即可

apply()、call() 和 bind() 方法的使用场景

1. 改变函数的 this 值

在 JavaScript 中，函数的 this 值默认指向全局对象（在浏览器中通常为 window 对象）。如果我们想要在函数内部使用不同的 this 值，那么可以使用 apply()、call() 或 bind() 方法来改变它。例如：

const obj = { name: 'Alice' };

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

greet.apply(obj); // "Hello, Alice!"
greet.call(obj); // "Hello, Alice!"
const newGreet = greet.bind(obj);
newGreet(); // "Hello, Alice!"

在上面的代码中，我们使用 apply()、call() 和 bind() 方法来将函数的 this 值设置为 obj 对象，并在函数内部使用它。

2. 函数的参数不确定

有时候我们无法确定函数的参数个数，或者我们想要将一个数组作为参数传递给函数。在这种情况下，我们可以使用 apply() 方法来将数组作为参数传递给函数。例如：

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

const nums = [1, 2, 3];

const result = sum.apply(null, nums);

console.log(result); // 6

在上面的代码中，我们使用 apply() 方法将 nums 数组作为参数传递给 sum() 函数，从而计算出它们的和。

3. 继承

在 JavaScript 中，我们可以使用 call() 方法来实现继承。前面讲解对象时也用到过。例如：

function Animal(name) {
  this.name = name;
}

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

const myDog = new Dog('Fido', 'Golden Retriever');

console.log(myDog.name); // "Fido"
console.log(myDog.breed); // "Golden Retriever"

在上面的代码中，我们定义了 Animal 和 Dog 两个构造函数，并使用 call() 方法将 Animal 的属性和方法继承到 Dog 中。

4. 部分应用函数

使用 bind() 方法可以实现部分应用函数，即将一个函数的部分参数固定下来，返回一个新的函数。例如：

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);

console.log(double(3)); // 6
console.log(double(4)); // 8

在上面的代码中，我们使用 bind() 方法将 multiply() 函数的第一个参数固定为 2，从而创建了一个新的函数 double()，它的作用是将传入的参数乘以 2。

最后

总之，apply()、call() 和 bind() 方法非常有用，并且在 JavaScript 开发中经常被使用。熟练掌握它们的用法可以帮助我们更好地编写高质量的代码。