Получение неопределенного со статическим get

Question

Я изучаю классы в JS, и я попытался увидеть, как работает static get. Прочитав об этом, я подумал, что это будет работать:

class Builder {
  constructor() {
    this.number = 1;
  }

  static get increaseNumber() {
    return 1 + this.number;
  }
}

const builderInstance = new Builder();

Но я получаю undefined, когда пытаюсь запустить это:

console.log(builderInstance.increaseNumber);

Если я удаляю ключевое слово static, оно работает, почему я получаю undefined, если я использую static?

Answer 1

Вы получаете неопределенное значение, потому что increaseNumber является статическим, и вы пытаетесь вызвать его из экземпляра Builder.

static - это keyword о том, что метод будет вызываться классом.

Нельзя вызывать статический метод непосредственно из объекта.

здесь учебник, объясняющий это

class Builder {
  constructor() {
    this.number = 1;
  }

  static get increaseNumber() {
    return 1 + this.number;
  }
}

const builderInstance = new Builder();

console.log(builderInstance.increaseNumber);

---

Вот соответствующая реализация для вызова из объекта:

Объект представляет экземпляр класса

class Builder {
  constructor() {
    this.number = 1;
  }

  get increaseNumber() {
    return 1 + this.number;
  }
}

const builderInstance = new Builder();

console.log(builderInstance.increaseNumber);

---

Как вы спросили меня из комментария, следующий фрагмент возвращает NaN, почему?

class Builder {
  constructor() {
    this.number = 1;
  }

  static get increaseNumber() {
    return 1 + this.number;
  }
}

console.log(Builder.increaseNumber);

Поскольку вы пытаетесь получить доступ к свойству с именем number; что undefined и 1 + undefined равно NaN.

При вызове статического метода вы не выполняете constructor, поэтому номер не инициализируется.

Что вы можете сделать:

class Builder {
  static get increaseNumber() {
    // We use || here to say "if it's not initialized, initialize it to 0"
    this.number = (this.number || 0) + 1;
    
    return this.number;
  }
}

console.log(Builder.increaseNumber);
console.log(Builder.increaseNumber);
console.log(Builder.increaseNumber);
console.log(Builder.increaseNumber);