如何将HTML元素创建函数转为JavaScript类构造函数？解决this赋值报错

我有一个用于创建新元素的createElement()函数，代码如下：

function createElement(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赋值而抛出错误，请问该如何修复？

修复方案 #

JavaScript类的构造函数中，this是预绑定的类实例对象，不能直接赋值覆盖。针对你的需求，推荐以下几种可行方案：

方案1：让类实例持有DOM元素属性

把创建好的DOM元素作为类的一个属性存储，同时可以额外封装操作元素的方法，逻辑清晰且符合类的使用规范：

class Element {
    constructor(name, className, attributes, innerText) {
        this.domElement = document.createElement(name);
        this.domElement.setAttribute('class', className);

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

        if (innerText) {
            this.domElement.innerText = innerText;
        }
    }

    // 自定义方法：将元素添加到父节点
    appendTo(parent) {
        parent.appendChild(this.domElement);
    }
}

使用示例：

const myDiv = new Element('div', 'container', { id: 'main' }, 'Hello World');
// 直接操作DOM属性
document.body.appendChild(myDiv.domElement);
// 或者调用自定义方法
myDiv.appendTo(document.body);

方案2：使用类的静态工厂方法

如果希望直接返回DOM元素，可以用静态方法封装原函数逻辑，既保留类的封装形式，又和原函数使用方式接近：

class Element {
    static create(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;
    }
}

使用示例：

const myDiv = Element.create('div', 'container', { id: 'main' }, 'Hello World');
document.body.appendChild(myDiv);

方案3：修改原型链实现（不推荐）

虽然可以通过Object.setPrototypeOf让类实例继承DOM元素的方法，但这种方式会修改原型链，可能引发性能问题和逻辑混淆，仅作知识参考：

class Element {
    constructor(name, className, attributes, innerText) {
        const element = document.createElement(name);
        // 将DOM元素的原型指向Element的原型
        Object.setPrototypeOf(element, Element.prototype);
        
        element.setAttribute('class', className);

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

        if (innerText) {
            element.innerText = innerText;
        }

        // 返回DOM元素替代默认的类实例
        return element;
    }
}

内容的提问来源于stack exchange，提问作者The AM