Как в JS ES6 классах унаследовать свойство родителя, чтобы дальше передать его для вычисления

187

07 ноября 2018, 05:50

Есть input type="date" при его изменении вычисляется значение, как это значение передать дочернему классу. Читал справку, там передаются параметры, а если я вычисляю свойство, то как мне его потом получить в дочернем классе, чтобы дальше производить с ним следующие операции

<body> 
  <div class="input"> 
    <input type='date' /> 
  </div> 
  <div class="containerForLastUpdateRecordAndPeriodItems"></div> 
 
  <script> 
    class dateInput { 
      constructor() { 
        this.input = document.querySelector("input[type='date']"); 
        this.input.onchange = this.onChange; 
      }             
 
      onChange(event) { 
        this.inputValue = event.target.value; 
        console.log('В датаИмпуте', this.inputValue)         
        this.updateTime = new Date(); 
        console.log('В updateTime', this.updateTime) 
        return this.inputValue; 
      } 
    } 
 
    class dateRange extends dateInput { 
     constructor() { 
       super();        
       this.container = document.querySelector('.containerForLastUpdateRecordAndPeriodItems'); 
     } 
      
     onChange() {        
       console.log(this.inputValue); 
       this.createPeriod(this.inputValue); 
     } 
 
     createPeriod(date) { 
       let newDate = date; 
       console.log(newDate); 
       newDate.year = newDate.year + 1; 
       return { 
         start: date, 
         end: newDate 
       } 
     } 
    } 
 
    const range = new dateRange(); 
 
  </script> 
 
</body>

Answer 1

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

Вам нужно воспользоваться зарезервированным словом super

class dateInput { 
  constructor() { 
    this.input = document.querySelector("input[type='date']"); 
    this.input.onchange = this.onChange.bind(this); // иначе потереяте контекст 
  }             
 
  onChange(event) { 
    this.inputValue = new Date(event.target.value); 
    console.log('В датаИнпуте', this.inputValue)         
    this.updateTime = new Date(); 
    console.log('В updateTime', this.updateTime) 
  } 
} 
 
class dateRange extends dateInput { 
  constructor() { 
    super();        
    this.container = document.querySelector('.containerForLastUpdateRecordAndPeriodItems'); 
  } 
      
  onChange(event) { 
     super.onChange(event); // вызываем метод родительского класса 
     console.log(this.inputValue); // this.inputValue уже доступен 
     const result = this.createPeriod(); 
     console.log(result); 
  } 
 
  createPeriod() { 
    let newDate = this.inputValue; // не обязательно передавать параметры 
    newDate.setYear(+newDate.getFullYear() + 1); // это делается так 
    console.log(newDate); 
    return { 
      start: this.inputValue, 
      end: newDate 
    } 
  } 
} 
 
const range = new dateRange();

<body> 
  <div class="input"> 
    <input type='date' /> 
  </div> 
  <div class="containerForLastUpdateRecordAndPeriodItems"></div> 
</body>

Создание интернет-магазина интимных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как работать с content-скриптом в chrome расширении?

Всем приветРешил разобраться в написании расширений для браузера, поискал в интернете, но немного не понял, как работать с контент-скриптом

179

javascript

Post запросы с FLASK сервера

Имеется клиентская часть на JS и серверная flaskЗапросы с клиента уходят, приходят на сервер

195

javascript

Своя кнопка поделиться

Для сайта нужно сделать свою кнопку "Поделиться" в различных социальных сетяхКак отследить, пользователь действительно поделился записью...

163

javascript

Как сделать один gulp file на несколько сайтов?

Есть много отдельных почти уникальных страниц сайта со своей файловой структурой и сборкой, но в них используется шаблон шапки, который лежит...

174