Question

在包含HTML元素的用户定义类上定义方法时，JS抛出TypeError并说object.method不是函数。

我的直觉是，当仅返回document.createElement时，该类会继承HTML对象方法，从而阻止用户定义的方法起作用？因此，我的想法是将HTML对象作为元素包含在数组中，但仍然没有骰子。

class inputBox {
    constructor(attributeList){
        let element = document.createElement('input')
        //just creating a unique ID here
        attributeList.id = Math.random().toString(36).substr(2, 16);
        for (let attr in attributeList){
            this[attr] = attributeList[attr]
            element.setAttribute(attr,this[attr])
        }
        return [element,attributeList]
    };

    updateValue(newValue) {
        let element = document.querySelector(`#${this[1].id}`)
        return element.value = newValue
    };
}

这很好

document.body.appendChild(inputBox1[0])

没有那么多（请注意：因为我正在查询DOM，所以没有[0]）

inputBox1.updateValue("hello")

想法是您可以使用多个参数调用类似以下的内容 var inputBox1 = new inputBox({type:'email', placeholder:'Your email'})

我认为这可以通过jquery来实现，但是我尝试将香草方法作为学习练习。谢谢

Answer 1

每当您从构造函数中显式返回一个对象时，返回值将仅为该对象，而不是该类的实例。当你做

return [element,attributeList]

返回的内容只是一个普通数组，没有任何与inputBox相关的内容，因此继续在该数组上引用inputBox类方法将无法正常工作。

相反，将element和attributeList放在实例上。

通过将元素放在实例上，还可以避免为每个元素创建动态唯一ID（这是代码的味道）-而是只需引用this.element：

class inputBox {
    constructor(attributeList){
        this.element = document.createElement('input');
        this.attributeList = attributeList;
        for (const attr in attributeList){
            this.element.setAttribute(attr,this[attr]);
        }
    }

    updateValue(newValue) {
        this.element.value = newValue;
    }
}

不过，除非inputBox中有更多代码，否则这里似乎没有使用类-在构造之后，其唯一公开的功能是设置输入的值，只需使用对输入的引用，就可以不太明显地做到这一点。考虑具有一个将attributeList分配给元素属性的函数，然后仅使用普通元素，例如：

const myInput = assignAttributes(attributeList);
// ...
myInput.value = 'newValue';

通过JS类修改HTML元素

1 个答案: