Javascript 中的 call()、apply() 和 bind()

你好呀！

我又带着新的 JavaScript 教程回来了。如果你在 JavaScript 领域工作过一段时间call()，你可能至少见过这bind()三种apply()方法中的一种。也许你在日常工作中并不常用它们，但它们确实是 JavaScript 面试中最常见的问题之一。

今天就是你学习它们的日子。💪

在 JavaScript 中，函数是对象。对象可以拥有属性和方法。因此，每个函数都拥有这三种方法。

但是……开始之前，我们先回顾this一下函数。相信我，这占了游戏的 80%。

何时执行一个函数，this由函数的调用方式（运行时绑定）决定。

const person = {
  firstName: 'Sanjeev',
  lastName: 'Sharma',
  age: 22,
  getIntro: function() {
     console.log(`${this.firstName} ${this.lastName} is ${this.age} years old.`);
  }
}

person.getIntro(); // "Sanjeev Sharma is 22 years old."

function randomFunc() {
  console.log(this);
}

randomFunc(); // window object

在方法中：this引用所有者对象。
在函数中（松散模式）：this引用全局对象。
在函数中（严格模式）：this为undefined。

对于 .article 来说这些知识已经足够了this。😉

称呼（）

根据 MDN：

thiscall() 方法使用给定的值和单独提供的参数来调用函数。

this简单来说，您可以决定调用函数时函数内部的内容。

让我们通过一个非常简单的例子来理解这一点。

function personIntro() {
  console.log(`${this.firstName} ${this.lastName}`);
};

const person1 = {
  firstName: 'Sanjeev',
  lastName: 'Sharma'
};

personIntro(); // Output 1: undefined undefined

personIntro.call(person1); // Output 2: Sanjeev Sharma

personIntro.call({ firstName : 'Harry', lastName : 'Potter' }); // Output 3: Harry Potter

我们有一个函数personIntro()，它将尝试访问this控制台firstName。lastName我们有三个输出：

1. 我们没有使用call()方法，所以this默认会引用windowobject。objectwindow没有任何像firstName或 这样的属性lastName。因此，我们得到undefined undefined。
2. 这次我们使用call()并传递一个具有所需属性的对象。this现在将是person。因此，我们得到了一个有利的输出Sanjeev Sharma。
3. 与上面相同，只是想证明其call()工作原理。😝

您还可以传递其他参数call()：

function personIntro(city, state) {
  console.log(`${this.name} is from ${city}, ${state}`);
};

const person = {
  name: 'Max',
  age: 26
}

personIntro.call(person, 'Los Angeles', 'California'); // Output: Max is from Los Angeles, California

因此，call()一个带有this. 👀的函数

绑定（）

根据 MDN：

bind() 方法创建一个新函数，当调用该函数时，其 this 关键字设置为提供的值，并且在调用新函数时，在提供的任何参数之前设置给定的参数序列。

唉，信息量太大，一下子处理不了。不过既然现在我们明白了call()，那就用这些知识来理解吧bind()。

function getPerson(person) {
  console.log(`${ person } is from ${ this.state }.`);
}

getPerson.call({ state : 'California' }, 'Max'); // Output 1: Max is from California.

const personFromCalifornia = getPerson.bind({ state : 'California' });

personFromCalifornia('Max'); // Output 2: Max is from California.
personFromCalifornia('Ben'); // Output 3: Ben is from California.

getPerson()我们创建了一个尝试访问的函数this。它有两个输出：

1. 我们使用call()并传递{ state : 'California' }（第一个参数）作为我们的this。第二个参数将是person。
2. 我们尝试使用 获得与 1 相同的输出bind()。使用bind()我们可以绑定一个this值到某个函数，并返回另一个函数。在我们的例子中，我们将其与 绑定{ state : 'California' }，并将返回的函数存储在 中personFromCalifornia。现在，当我们调用 时personFromCalifornia，我们只需要传递person参数。它已经有一个this值了。
3. 只需使用不同的方式再次调用相同的函数即可person。

call()那么，两者之间有什么区别bind()？

1. call()立即调用，而bind()返回我们可以稍后调用的函数。
2. call()需要额外的参数，但bind()没有。
3. call()与 不同，它不会复制该函数bind()。

呼！快完成了。😪

申请（）

根据 MDN：

apply() 方法使用给定的 this 值调用一个函数，并将参数作为数组（或类似数组的对象）提供。

它与 完全相同call()，只是有细微的差别。

function sum(num1, num2) {
  console.log(this + num1 + num2);
}

sum.call(2, 3, 4); // Output: 9
sum.apply(2, [3, 4]); // Output: 9

call()单独接受参数，但apply()将它们作为数组接收。😆 就是这样。

完结。🙌

通过LinkedIn、GitHub或Twitter与我联系。

谢谢。👋 希望你今天学到了一些东西。🙏