JavaScript自定义DOM创建类链式调用方法返回undefined问题求解

问题原因 #

• 你的toAppend方法没有显式设置返回值，JavaScript中函数/类方法无显式return时，默认返回undefined
• 链式调用时，new gerarNode('div').toAppend(xxx)最终的返回结果是toAppend方法的返回值，而非gerarNode的实例，因此赋值给变量的结果就是undefined
• 直接new gerarNode('div')时，构造函数默认返回实例对象，因此结果符合预期

修复方案 #

核心是在所有需要支持链式调用的类方法末尾添加return this，返回当前实例本身，既可以满足赋值需求，也可以继续链式调用其他方法。

修复后的代码示例：

// 类名建议首字母大写，符合JS类命名的通用规范
class GerarNode {
    constructor(input) {
        this.nodetype = input;
        this.node = document.createElement(input);
    }
    toAppend(appends) {
        this.node.appendChild(appends);
        return this; // 新增返回当前实例，支持链式调用
    }
    // 可扩展更多你需要的DOM操作方法，都可以通过return this支持链式调用
    setProp(key, value) {
        this.node[key] = value;
        return this;
    }
    setText(content) {
        this.node.textContent = content;
        return this;
    }
}

使用效果验证：

const anotherNodeObject = document.createElement('span');
const jorge = new GerarNode('div')
    .setText('测试文本')
    .setProp('id', 'test-box')
    .toAppend(anotherNodeObject);
console.log(jorge); // 输出GerarNode实例对象，符合你的预期
console.log(jorge.node); // 直接获取生成的DOM元素

内容的提问来源于stack exchange，提问作者Henrique Silva