对象 setter 在 JS 中未定义

Question

我第一次尝试用纯 JS 构建一个 OO 示例。 MyInput 将三个 HTML 元素组合在一起。用 new MyInput('sometext') 初始化它按预期工作，但不是 inp = new MyInput(); inp.header = 'other text'.

我试图创建一个 setter 方法，但是这失败了 this.h2 undefined。

const root = document.querySelector('#root')

const h1 = document.createElement('h1')
h1.textContent = 'Just Testing'
root.appendChild(h1)

// guess = Math.floor( Math.random() * 100)
// document.title = guess

class MyInput {

    constructor(header) {
        
        this.header = header

        const h2 = document.createElement('h2')
        h2.textContent = this.header
        this.h2 = h2
        
        this.div = document.createElement('div')

        const inp = document.createElement('input')
        inp.disabled = true

        inp.addEventListener('blur',
                             (e)=>{
                                 inp.disabled = true
                                 but.style.visibility = 'visible'
                             }
                            )
        
        const but = document.createElement('button')
        but.textContent = 'unlock'
        but.addEventListener('click',
                             ()=>{
                                 but.style.visibility = 'hidden'
                                 inp.disabled = false
                                 inp.focus()
                             })

        this.div.appendChild(h2)
        this.div.appendChild(inp)
        this.div.appendChild(but)
    }
    // following line throws error this.h2 undefined
    set header (newHeader) {this.h2.textContent = newHeader} // ???

}

const i1 = new MyInput('this works')
root.appendChild(i1.div)

const i2 = new MyInput()
i2.header = 'this does not work?!?'
root.appendChild(i2.div)

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
  </head>
  <body>
    <div id='root'></div>
    <script src='test.js'></script>
  </body>
</html>

Answer 1

在 this.h2 = h2 完成后简单地移动临界线 this.header = header！

console.log('yo!')

document.title = 'hello world'

const root = document.querySelector('#root')

const h1 = document.createElement('h1')
h1.textContent = 'Just Testing'
root.appendChild(h1)

class MyInput {

    constructor(header) {

        const h2 = document.createElement('h2')
        h2.textContent = header
        this.h2 = h2
        this.header = header // <- this line moved
        this.div = document.createElement('div')

        const inp = document.createElement('input')
        inp.disabled = true

        inp.addEventListener('blur',
                             (e)=>{
                                 inp.disabled = true
                                 but.style.visibility = 'visible'
                             }
                            )
        
        const but = document.createElement('button')
        but.textContent = 'unlock'
        but.addEventListener('click',
                             ()=>{
                                 but.style.visibility = 'hidden'
                                 inp.disabled = false
                                 inp.focus()
                             })

        this.div.appendChild(h2)
        this.div.appendChild(inp)
        this.div.appendChild(but)
    }

    set header (newHeader) {this.h2.textContent = newHeader}

}

const i1 = new MyInput('this works')
root.appendChild(i1.div)

const i2 = new MyInput()
i2.header = 'and now this also works!'
root.appendChild(i2.div)

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
  </head>
  <body>
    <div id='root'></div>
    <script src='test.js'></script>
  </body>
</html>

对象 setter 在 JS 中未定义

Object setter UNDEFINED in JS

javascript

setter

object