javascript - 为什么我不能在 JavaScript 中使用我的类方法访问我的类的属性？

Question

我在 JavaScript 中使用类并遇到问题。

• 我定义了一个父类和子类
• 然后我基于这些实例化一个对象
• 然后我从子类调用一个方法，带有一个点击事件，但这个方法似乎无法读取我试图访问的属性。

这是我的 JavaScript 代码

class Box {
  constructor(boxId) {
    this.boxElement = document.getElementById(boxId)
  }
}

class SampleBox extends Box {
  constructor(boxId) {
    super(boxId)
    this.sampleText = this.boxElement.value
    this.wordCount = 0
    this.textConfirmed = false
  }

  refreshSampleText() {
    console.log(this.wordCount)
    this.sampleText = this.boxElement.value
  }
}

sampleBoxObject = new SampleBox('display-area')

confirmBtn = document.getElementById('confirm-button')
confirmBtn.addEventListener('click', 
sampleBoxObject.refreshSampleText)

我的目标是读取 boxElement 的内容并将其分配给一个名为 sampleText 的属性，但这并没有发生。（从 Box 类可以看出，boxElement 是一个 dom 对象 - 在本例中它是一个文本区域。）

该方法中的 console.log 只是用来查看我是否能够读取构造函数创建的任何属性，但它不能，因为它返回未定义。

我知道正在创建对象实例并且正在使用构造函数设置变量，因为我已经在控制台中签入了这个。

（顺便说一句，我并没有尝试更新 html 元素。我试图从中获取信息，以便之后可以操作该信息。方法名称中的“刷新”一词可能会产生误导。）

这让我感到困惑，我将不胜感激任何帮助。

标签： javascriptclass