如何为 HTML 元素创建 JavaScript 类构造函数

Question

我有一个函数

element()

，我用它来创建新元素。

函数元素（名称，类名，属性，innerText）{

function element(name, className, attributes, innerText) {

    const element = document.createElement(name);
    element.setAttribute("class", className);

    if (attributes) {

        Object.keys(attributes).forEach(attr => {
            element.setAttribute(attr, attributes[attr]);
        });

    }

    if (innerText) element.innerText = innerText;

    return element;

}

如何将此函数转换为类构造函数？这是我的想法：

class Element {

    constructor (name, className, attributes, innerText) {

        this = document.createElement(name);
        this.setAttribute("class", className);

        if (attributes) {
            
            Object.keys(attributes).forEach(attr => {
                this.setAttribute(attr, attributes[attr]);
            });

        };

        if (innerText) this.innerText = innerText;

    };

}

但这会引发错误，因为我无法为

this

赋值。我该如何解决这个问题？

Answer 1

确实，您无法将任何内容分配给

this

。我不知道你对

this

的理解是什么，但这没有意义。我将尝试通过修改您的代码来给您一个想法。首先，我重命名了你的类，因为你可能需要同时分离元素和它的包装器：

class ElementWrapper {

    constructor(name, className, attributes, innerText) {
        this.element = document.createElement(name);
        this.element.setAttribute("class", className);
        if (attributes) {
            Object.keys(attributes).forEach(attr => {
                this.element.setAttribute(attr, attributes[attr]);
            });
        };
        if (innerText) this.element.innerText = innerText;
    };

    addAttribute(name, value) {
        this.element.setAttribute(name, value);
        return this.element;
    }

} // class ElementWrapper

你没有任何类成员，但我引入了两个：一个属性

element

和一个方法

addAttribute

。

使用示例：

const wrapper = new ElementWrapper(/*  */);
const rawElement = wrapper.element;
const sameElementNamed =
    wrapper.addAttribute("name", "my-button");
const anotherWrapper = new ElementWrapper(/*  */);
anotherWrapper.addAttribute("name", "my-section");

这里，

new

表明您不是将

ElementWrapper

作为常规函数调用（如果您愿意，也可以这样做），而是作为构造函数调用。

该调用会为您返回一些引用，这是对创建的

ElementWrapper

实例的引用。您可以使用此引用来访问实例。当您调用wrapper.addAttribute(/* ... */)时，您将实例

wrapper

作为隐式参数传递给

addAttribute

。该类的方法需要此引用来了解应使用哪个可能的

ElementWrapper

实例来访问该实例。

addAttribute

的代码如何知道什么是

this

、

wrapper

或

anotherWrapper

？因为您在点之前使用名称传递一个或另一个实例引用。