JavaScript原型与链式调用下调整标签拼接逻辑，实现正确HTML嵌套输出

问题根因 #

当前实现的核心逻辑是每次调用方法时，直接在现有存储的文本前后拼接对应标签，链式调用的嵌套顺序完全和方法执行顺序强绑定：

• 先调用的方法对应的标签，会成为嵌套结构的最内层
• 后调用的方法对应的标签，会成为嵌套结构的最外层

执行myForm.p().span()时的实际流程为：

1. 初始文本为Hello
2. 执行p()：给文本前后加p标签，得到<p>Hello</p>
3. 执行span()：给现有p标签包裹的文本前后再加span标签，最终生成<span><p>Hello</p></span>，和预期的“p在外层、span在内层”的结构完全相反。

可选调整方案 #

方案1：零改动调整调用顺序 #

如果不想修改原有代码，只需要匹配当前逻辑的调用规则，按照「先调内层标签方法、再调外层标签方法」的顺序写链式调用即可：

// 调整后的调用写法
console.log(myForm.span().p().text)
// 实际输出：<p><span>Hello</span></p>

执行流程和预期完全一致：先给原始文本包span标签，再给span包裹的文本包p标签，最终结构正确。

方案2：改造内部存储逻辑，匹配直观调用顺序 #

如果你希望保持myForm.p().span()这种“先写外层标签、再写内层标签”的调用写法，也能生成正确结构，就需要解耦“标签注册时机”和“字符串生成时机”：不再调用方法时就直接拼接最终字符串，而是维护一个标签栈记录每层的包裹标签，等到真正需要输出文本的时候，再按层级顺序拼接最终HTML。
改造后的代码示例：

const myForm = {
  text: "Hello",
  // 新增标签栈，按调用顺序记录每层需要包裹的开/闭标签
  tagStack: [],
  // 重写文本读取逻辑，自动拼接层级结构
  get wrappedText() {
    let result = this.text;
    // 从栈尾到栈头遍历：后注册的内层标签要先包裹在文本外
    for (const tag of this.tagStack.reverse()) {
      result = tag.open + result + tag.close;
    }
    return result;
  },
  span: function() {
    // 仅把标签信息压入栈，不直接修改文本
    this.tagStack.push({ open: '<span>', close: '</span>' });
    return this;
  },
  p: function() {
    this.tagStack.push({ open: '<p>', close: '</p>' });
    return this;
  }
};

// 保持原有调用顺序即可得到正确结果
console.log(myForm.p().span().wrappedText)
// 实际输出：<p><span>Hello</span></p>

这种逻辑下，调用方法的顺序和日常认知的嵌套顺序完全一致：先调用的p()是最外层标签，后调用的span()是内层标签，不需要颠倒调用顺序。

方案3：结合原型机制的通用实现 #

如果是围绕JavaScript原型技术做练习，可以把通用的标签包裹逻辑抽到原型链上，减少重复代码：

// 定义基础构造函数
function TagWrapper(initText) {
  this.originText = initText;
  this.tagStack = [];
}

// 通用标签注册方法挂在原型上
TagWrapper.prototype.registerTag = function(openTag, closeTag) {
  this.tagStack.push({ open: openTag, close: closeTag });
  return this;
};

// 定义常用标签的快捷方法
TagWrapper.prototype.p = function() {
  return this.registerTag('<p>', '</p>');
};
TagWrapper.prototype.span = function() {
  return this.registerTag('<span>', '</span>');
};

// 最终渲染方法也挂在原型上
TagWrapper.prototype.render = function() {
  let result = this.originText;
  for (const tag of this.tagStack.reverse()) {
    result = tag.open + result + tag.close;
  }
  return result;
};

// 实例化使用
const myForm = new TagWrapper("Hello");
console.log(myForm.p().span().render())
// 实际输出：<p><span>Hello</span></p>

改造的核心思路是把“生成最终HTML字符串”的动作从方法调用环节推迟到真正需要输出的环节，通过栈结构记录标签层级，从根本上解决调用顺序和嵌套顺序不匹配的问题。

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