为什么父自定义元素方法被覆盖?

时间:2019-06-05 02:53:11

标签: javascript custom-element

我创建了一个名为“ CursorCell”的自定义元素,该元素扩展了HTMLTableCellElement对象。

我向此自定义元素添加了一个名为“值”的属性。

此后,我创建了另一个名为“ DateCell”的自定义元素,该自定义元素扩展了“ CursorCell”自定义元素。在“ DateCell”中,我想扩展“设置值”方法。

这是我的代码:

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>

在扩展“设置值”方法之后,“设置值”方法可以正常工作,而我无法从“ DateCell.value”中读取值。

当我从“ DateCell”中删除“设置值”方法时,我可以从“ DateCell.value”中读取该值。

那么,为什么CursorCell的“获取值”方法被覆盖?

1 个答案:

答案 0 :(得分:1)

value是一个属性。对于属性,setter和getter一起工作。

您不会覆盖设置方法或获取方法,而是属性本身。

如果使用setter(set value)覆盖它,则需要同时使用getter(get value)覆盖它。否则,JS引擎将认为吸气剂为undefined

您还应该在类扩展中定义吸气剂:

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