【译】JavaScript中的call,apply,bind

在我们开始研究call, apply, bind之前，应该对how does "this" keyword works in JavaScript有所认知。

简言之，"this" 创造了指向一个对象的引用。它可能指向了全局对象，比如在全局作用域{window object}。

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

"this"在一个对象的内部指向对象的本身。

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

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

所以，那就是"this"如何通过作用域自动地获取它的上下文的。

但是，如果我们想指定"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函数中创造了一个"this"指向"religion"对象。

"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"方法接收以逗号分隔的参数；但是"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

• 翻译原文：https://dev.to/ritik_dev_js/what-the-hack-is-call-apply-bind-in-javascript-11ce

• 文章首发：https://github.com/reng99/blogs/issues/63

• 更多内容：https://github.com/reng99/blogs