Функция JavaScript из расширения класса не распознана

Я играю с классами ES6 и столкнулся с поведением кода ниже.

Ошибка, которую я получаю, это bob.personName is not a function.

И класс, и его расширение определены constructor, но я все равно не могу заставить его работать. Я добавил комментарии под строками, которые, как мне кажется, могут быть проблемой. Спасибо за помощь!

class Person {
  constructor(canSpeak) {
    this.canSpeak = true;
  }
}

class Hello extends Person {
  constructor(name) {
  this.name = name;
  }

  personName() { //am I missing a parameter?
    if (this.canSpeak) {
      return `Name is: ${this.name}, can speak? ${this.canSpeak}`;
        }
    };
};

const bob = new Person('Bob'); //should I call Hello extension instead?
console.info(bob.personName());
personName — это только метод Hello экземпляров, а не Person.
Barmar 12.12.2020 23:04

Подумайте об этом так. Есть машина (Персона) с опциональным люком (Здравствуйте), но вы не выбрали этот вариант, вы купили базовую модель (Персона) и теперь пытаетесь открыть люк

Bravo 12.12.2020 23:09

Да, это провалилось для меня. Я не могу вызвать функцию, являющуюся частью конкретной конфигурации, на базовом уровне. Мне нужно вызвать его оттуда, где он находится. Спасибо!

marcin2x4 12.12.2020 23:14
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
236
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поскольку метод существует на Hello.prototype, а не на Person.prototype, вам нужен экземпляр Hello.

Вы также не можете ссылаться на this до вызова super внутри конструктора подкласса, поэтому сделайте это перед назначением this.name:

class Person {
  constructor(canSpeak) {
    this.canSpeak = true;
  }
}

class Hello extends Person {
  constructor(name) {
    super();
    this.name = name;
  }

  personName() { //am I missing a parameter?
    if (this.canSpeak) {
      return `Name is: ${this.name}, can speak? ${this.canSpeak}`;
    }
  };
};

const bob = new Hello('Bob'); //should I call Hello extension instead?
console.info(bob.personName());

Чем ты! Я думал, что super был тем, чего я пропустил.

marcin2x4 12.12.2020 23:19

Другие вопросы по теме