Почему метод родительского пользовательского элемента переопределен?

Question

Я создал пользовательский элемент с именем «CursorCell», который расширяет объект HTMLTableCellElement.

Я добавляю атрибут с именем «значение» к этому пользовательскому элементу.

После этого я создаю еще один пользовательский элемент с именем «DateCell», который расширяет пользовательский элемент «CursorCell».В «DateCell» я хочу расширить метод «set value».

Вот мой код:

class CursorCell extends HTMLTableCellElement {
  constructor() {
    super();
    this.textBox = document.createElement("input");
    this.textBox.type = "text";
    this.appendChild(this.textBox);
    $(this).addClass("cursorCell");
    $(this).addClass("borderCell");
  }
  set textContent(t) {
    this.value = t;
  }
  get textContent() {
    return this.textBox.value;
  }
  set value(v) {
    this.textBox.value = v;
  }
  get value() {
    return this.textBox.value;
  }
}
customElements.define('cursorcell-string',
  CursorCell, {
    extends: 'td'
  });
class DateCell extends CursorCell {
  constructor() {
    super();
    $(this).addClass("dateCell");
  }

  set value(v) {
    super.value = v;
    switch (v) {
      case "a":
        this.textBox.className = "aShiftColor";
        break;
      case "b":
        this.textBox.className = "bShiftColor";
        break;
      case "c":
        this.textBox.className = "cShiftColor";
        break;
    }
  }

}
customElements.define('datacell-string',
  DateCell, {
    extends: 'td'
  });
$(document).ready(function() {
  var t = document.createElement("table");
  var row = t.insertRow(t.rows);
  var cell1 = new DateCell();
  row.id = "bb";
  row.appendChild(cell1);
  cell1.textContent = "a";

  document.body.appendChild(t);
  $.each($("tr#bb").children(".cursorCell"),
    function(i, val) {
      console.log(val.value);
    });

});

::selection {
  background: none;
  /* WebKit/Blink Browsers */
}

::-moz-selection {
  background: none;
  /* Gecko Browsers */
}

td input[type="text"] {
  border: none;
  height: 100%;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

td input[type="text"]:focus {
  outline: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

.aShiftColor {
  background-color: #ff99cc;
}

.borderCell {
  border: 1px solid #e0e0e0;
}

.bShiftColor {
  background-color: #ffffcc;
}

.cursorCell {
  margin: 0px;
  width: 25px;
  padding: 0px;
  text-align: center;
  font-size: 17px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

После того, как я расширил метод «set value», метод «set value» работает должным образом, тогда как я не могу прочитать значение из «DateCell».value ".

Когда я удаляю метод" set value "из" DateCell ", я могу прочитать значение из" DateCell.value ".

Итак, почему CursorCell" получитьЗначение "метод переопределен?

Answer 1

value является собственностью. Для свойства сеттер и геттер работают вместе.

Вы переопределяете не сеттер или геттер, а само свойство.

Если вы переопределите его с помощью установщика (set value), вам нужно будет переопределить его с помощью получателя (get value) одновременно. В противном случае движок JS будет считать геттер undefined.

Вы также должны определить получатель в расширении класса:

class DateCell extends CursorCell {    
    //...    
    set value(v) { super.value = v }
    get value() { return super.value }
}