javascript - 如何使应用/调用/绑定(bind)在这里工作？

Question

我需要帮助才能让它发挥作用。
我以为我理解“这个”，但这是相当痛苦的。

如果我运行此代码，第一个 console.log 将按预期工作。它会输出: 'bob red,blue' ，其中 this.name 指的是 'bob'。

第二个 console.log 做了一些奇怪的事情，它记录了“结果红色”和“结果蓝色” - 其中 this.name 指的是“结果”。
我不知道它从哪里得到“结果”，但这不是我的主要问题。

我知道我可以创建一个 var that = this 来用 that.name 引用“bob”。
我的主要问题是:如何使用 apply/call 或 bind 使第二个 console.log 中的 this.name 引用“bob”？

const person = {
  name: 'bob',
  cars: ['red', 'blue'],
  output: function() {
    console.log(this.name + ' ' + this.cars);
    this.cars.forEach(function(car) {
      console.log(`${this.name} ${car}`)
    })
  }
}

person.output()

Answer 1

我建议采用 3 种方法来实现此目的。首先，箭头函数(如果您的环境支持):

const person = {
  name: 'bob',
  cars: ['red', 'blue'],
  output: function() {
    console.log(this.name + ' ' + this.cars);
    this.cars.forEach((car) => { // <--
      console.log(`${this.name} ${car}`);
    });
  }
}

person.output();

接下来，将使用 forEach 本身的功能并将 this 作为最后一个参数传递:

const person = {
  name: 'bob',
  cars: ['red', 'blue'],
  output: function() {
    console.log(this.name + ' ' + this.cars);
    this.cars.forEach(function(car) {
      console.log(`${this.name} ${car}`);
    }, this); // <--
  }
}

person.output();

最后，您可以像这样使用bind:

const person = {
  name: 'bob',
  cars: ['red', 'blue'],
  output: function() {
    console.log(this.name + ' ' + this.cars);
    this.cars.forEach(function(car) {
      console.log(`${this.name} ${car}`);
    }.bind(this)); // <--
  }
}

person.output();

理论上，您可以使用apply或call，但比较麻烦:

const person = {
  name: 'bob',
  cars: ['red', 'blue'],
  output: function() {
    console.log(this.name + ' ' + this.cars);
    function printCar(car) {
      console.log(`${this.name} ${car}`);
    }
    
    const self = this;
    this.cars.forEach(function(car) {
      printCar.call(self, car);
    });
  }
}

person.output();

const person = {
  name: 'bob',
  cars: ['red', 'blue'],
  output: function() {
    console.log(this.name + ' ' + this.cars);
    function printCar(car) {
      console.log(`${this.name} ${car}`);
    }
    
    const self = this;
    this.cars.forEach(function(car) {
      printCar.apply(self, [car]);
    });
  }
}

person.output();