Как настроить '_this' или 'self' при использовании декларации javscript 'class'

Question

Как мы можем настроить 'self' при использовании 'class'?

Я видел переменную self, которая была настроена для более предсказуемого использования this в классах javascript с помощью объявления класса function. Как мы можем сделать это с помощью объявления класса?

Функция VS Объявления класса

// Using the 'function' declaration
function Apple (type) {
    var self = this
    self.type = type
    self.color = "red"
    self.getInfo = function() {
        return self.color + ' ' + self.type + ' apple'
    };
}

// Using the 'class' declaration
class Apple2 {
    constructor(type){
        var self = this
        self.type = type
        self.color = "red"
    }
    getInfo () {
        return self.color + ' ' + self.type + ' apple'
    }
}
let ap = new Apple('Granny')
let ap2 = new Apple2('Jazz')
console.log(ap.getInfo(), ap2.getInfo())
// prints 'red Granny apple undefined undefined apple'

Edit:

Это похоже на создание переменной 'self' до того, как конструктор на самом деле работает в консоли Chrome, но веб-пакет выдает ошибку:

// Using the 'class' declaration
class Apple2 {
    self = this
    constructor(type){

        self.type = type
        self.color = "red"
    }
    getInfo () {
        return self.color + ' ' + self.type + ' apple'
    }
}
console.log(new Apple2('Jazz').getInfo())

Answer 1

Правильный способ для классов: , а не псевдоним this:

class Apple2 {
  constructor(type) {
    this.type = type
    this.color = 'red'
  }

  getInfo() {
    return `${this.color} ${this.type} apple`
  }
}

console.log(new Apple2('Jazz').getInfo())

Причина в том, что это фактически (приблизительно) эквивалентно следующему коду:

function Apple(type) {
  this.type = type
  this.color = 'red'
}

Apple.prototype.getInfo = function() {
  return this.color + ' ' + this.type + ' apple'
}

console.log(new Apple('Granny').getInfo())

, поэтому использование this работает.На самом деле, даже с вашим исходным кодом, псевдоним не был необходим:

function Apple(type) {
  this.type = type
  this.color = 'red'
  this.getInfo = function() {
    return this.color + ' ' + this.type + ' apple'
  }
}

var apple = new Apple('Granny')

// does not make a difference
console.log(apple.getInfo())

var getInfo = apple.getInfo

// here is where it makes a difference
console.log(getInfo())
// how to fix
console.log(getInfo.call(apple))

Подробнее об этом поведении см. Как работает ключевое слово "this"?