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

什么是this？

1. bind()

2. 调用()

3. apply()

在使用 JavaScript 编程时，我总是对 JavaScript 的工作原理感到困惑。正如 Kyle Simpson 所说：

“我认为没有人真正了解 JS，至少没有完全了解。”

任何学习 JavaScript 的程序员this肯定都遇到过 with 关键字。那么，我们就从 开始吧this。在这个过程中，我们将学习如何使用 bind()、call() 和 apply() this。希望读完这篇文章后，你的疑问能够迎刃而解。让我们开始吧。

什么是this？

JavaScript 中的“this”设置为函数正在执行的当前环境。

优秀的程序员常常会对关键字感到困惑和困惑，并且对关键字的引用也比较模糊this。
因此，为了清楚地定义关键字所属的对象this，我们需要使用诸如bind()、call()和 之类的方法apply()。

1. bind()

bind() 方法创建一个新函数，当调用该函数时，其this关键字将被设置为提供的值。

这是一个例子-👁

var user = {
  name: 'Ryan',
  getName: function() {
    return this.name;
  }
}
function displayInfo() {
  console.log("Hello " + this.getName());
}
var getInfo = displayInfo.bind(user);
getInfo();
// Hello Ryan

当我们使用 bind() 时，会创建一个新的 displayInfo 实例，并将用户对象绑定到其this关键字。注意：每当使用 bind() 创建新实例时，它都会复制 displayInfo 函数。因此，当我们在 displayInfo 中调用 this.getName() 时，我们会获得名称“Ryan”。此外，我们还可以访问用户对象的所有属性。
此外，由于它返回一个新的函数对象，因此.bind允许您现在设置this值，并允许您将来执行该函数。

2. 调用()

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

这是什么意思？👀
这意味着我们可以调用任何函数，并明确指定在调用函数中应该引用什么。

以下是一个例子-

var user = {
  name: 'Ryan',
  getName: function() {
    return this.name;
  }
}
function displayInfo(greeting, greet2) {
  console.log( greeting + ' ' + greet2 +' ' + this.getName() +"?");
}
displayInfo.call(user, 'Hello!', 'How are you');
//Hello! How are you Ryan?

call() 方法接受第一个参数作为this引用，之后我们可以将其他参数传递给该函数。在这里，我们调用 displayInfo() 并将其this设置为用户对象，并附加一个值为“Hello”的参数 greet。call
Note:() 方法不会像 bind() 那样复制函数。🤞

3. apply()

apply() 方法与 call() 方法类似。两者的用途完全相同。

Note: call() 和 apply() 之间的唯一区别是 call() 要求所有参数单独传入，而 apply() 要求所有参数以单个数组的形式传入。

以下是一个例子-

var user = {
  name: 'Ryan',
  getName: function() {
    return this.name;
  }
}
function displayInfo(greeting, greet2) {
  console.log( greeting + ' ' + greet2 +' ' + this.getName() +"?");
}
displayInfo.call(user, 'Hello!', 'How are you'); 
//Hello! How are you Ryan?

displayInfo.apply(user, ['Hello!' , 'How are you']); 
//Hello! How are you Ryan?

在哪里使用？

1. .bind()当您希望稍后在事件中有用的特定上下文中调用该函数时使用。
2. 当您想要立即调用该函数并修改上下文时，请使用.call()或。.apply()

您可以参考mdn 文档来了解更多信息并了解实际实现。

JavaScript 中的此类内置方法对任何程序员或编码人员都很有用。👾✌

希望这篇文章对您有所帮助，并能提供一些信息。请在评论区分享您的反馈。如有疑问，请在LinkedIn、Instagram、GitHub和Twitter上联系我。😀