JavaScript 中的调用、应用和绑定

在开始研究 call、apply、bind 之前，你应该了解JavaScript 中“this”关键字是如何工作的。
简而言之，“this”创建了一个对象的引用。它可能引用全局对象，即全局范围内的 {window 对象}。


console.log(this);
//Window {parent: Window, opener: null, top: Window, length: 4, frames: Window, …}

并且位于对象内部，指向对象本身。


const student = {
    name:"ritik",
    getDetails(){
        console.log(this);
    }
}

student.getDetails();
//{name: "ritik", getDetails: ƒ}

这就是“this”如何通过其范围自动获取上下文的方式。

但是如果我们想将“this”的上下文（环境）指定给一个特定的对象，该怎么办呢？
让我们用代码看看：


const religion = {
     type: "humanity",
     property:"greatest"
}

function getDetails(){
    console.log(`${this.type} is the ${this.property} religion`);
}

getDetails();
//undefined is the undefined religion

因此，这里的“this”指的是“window”对象（根据其在函数中的默认行为，“this”指的是“window”对象）。
但我们希望它指的是“religion”对象。
这时，call、apply、bind 就派上用场了。


const religion = {
     type: "humanity",
     property:"greatest"
}

function getDetails(){
    console.log(`${this.type} is the ${this.property} religion`);
}

getDetails.call(religion);
//humanity is the greatest religion
getDetails.apply(religion);
//humanity is the greatest religion

这里，“call”或“apply”方法有助于在“religion”对象和“getDetails”函数之间建立连接。
或者，我们可以说，“call”或“apply”方法有助于在“getDetails”函数中创建指向“religion”对象的“this”引用。

“call” 和 “apply” 的工作方式相同，但它们处理参数的方式不同。
现在让我们将一些参数传递给函数 “getDetails”。



const religion = {
     type: "humanity",
     property:"greatest"
}

function getDetails(world,creature){
    console.log(`${this.type} is the ${this.property} religion in the ${world} of ${creature}`);
}

getDetails.call(religion,"modern world","human");
//humanity is the greatest religion in the modern world of human

getDetails.apply(religion,["modern world","human"]);
//humanity is the greatest religion in the modern world of human

“call”方法将参数附加到“this”上下文中，并以逗号线性分隔，而
“apply”将参数作为数组处理。

现在，如果您想在代码的多个地方使用带有不同“参数”的“getDetails”函数，该怎么办？
多次使用“call”或“apply”方法可能是解决方案之一，但“bind”方法可以使过程更简单。

“Bind” 方法会创建一个指向传入对象的“this”引用，类似于“apply”或“call”，但返回的是一个函数。
现在，该函数可以在代码中多次使用，并传入不同的“参数”。


const religion = {
     type: "humanity",
     property:"greatest"
}

function getDetails(world,creature){
    console.log(`${this.type} is the ${this.property} religion in the ${world} of ${creature}`);
}

const newgetDetails = getDetails.bind(religion);
newgetDetails("modern world","human");
//humanity is the greatest religion in the modern world of human

newgetDetails("future world","different creatures");
//humanity is the greatest religion in the future world of different creatures

如果您不想存储返回函数，那么可以直接像这样调用它：


const religion = {
     type: "humanity",
     property:"greatest"
}

function getDetails(world,creature){
    console.log(`${this.type} is the ${this.property} religion in the ${world} of ${creature}`);
}

getDetails.bind(religion)("modern world","human")
//humanity is the greatest religion in the modern world of human

末日

本文将学习 JavaScript 中的 call、apply 和 bind。您可以尝试代码示例，并尝试使用“this”关键字。
{此文章也可在ritikrana.in上阅读}

文章来源：https://dev.to/ritikrana/what-the-hack-is-call-apply-bind-in-javascript-11ce