这个 ES6 重构准确吗？答案

【问题标题】：Is this ES6 refactor accurate?这个 ES6 重构准确吗？
【发布时间】：2020-07-17 20:47:21
【问题描述】：

当我看到这段代码时：

CustomUIHandler.prototype.createFormSession = function(formId, payload) {
  function FormSession(formId, payload, common) {
    this.formId = formId;
    this.payload = payload;
    this.common = common;
  }

  FormSession.prototype.getContainer = function(clientContext) {
    return xmui.XmuiHandler.getContainer(clientContext);
  }

  FormSession.prototype.startSession = function(clientContext, actionContext) {
    this.actionContext = actionContext;
    this.clientContext = clientContext;
  }

  FormSession.prototype.promiseFormInput = function() {
    return this.renderForm();
  }

  FormSession.prototype.renderForm = function() {
    var _this = this;
    var uiContainer = this.getContainer(this.clientContext);
    return new Promise(function(resolve, reject) {
      uiContainer.append($(
        "<div>\
            <input id='myText' type='text'>\ <
        button id = 'continueButton' > Continue < /button>\ <
        /div>"
      });

      $('#continueButton').click(function() {
        uiContainer.empty();
        var formInput = com.ts.mobile.sdk.FormInput.createFormInputSubmissionRequest({
          data: document.getElementById("myText").value
        });
        resolve(formInput);
      });
    })
  }
  FormSession.prototype.onContinue = function(payload) {

  }

  FormSession.prototype.onError = function(payload) {
    alert(JSON.stringify(payload));
  }

  FormSession.prototype.endSession = function() {

  }

  return new FormSession(formId, payload, this.common);

}

以上是完整的原始代码文件。

我将其重构为正确吗：

class FormSession extends CustomUIHandler {
  constructor(formId, payload, common) {
    super();
    this.formId = formId;
    this.payload = payload;
    this.common = common;
  }
}

createFormSession(formId, payload) {

}

【问题讨论】：

在第一个示例中，FormSession 不扩展 CustomUIHandler。这里可能缺少代码，但那里发生的所有事情都是一个方法 (createFormSession) 大概创建了一个 FormSession 的实例。
第一段代码没有意义。 createFormSession 被定义为一个什么都不做的函数：它在其本地范围内定义一个函数，但从不使用它，因此内部函数对象被垃圾回收。
@FelixKling，我想我不明白 createFormSession 大概在 ES6 中创建 FormSession 的实例是什么样子的。我在 OP 中添加了更多代码。
正如@trincot 所说，原始代码毫无意义。你遗漏了什么吗？
@Barmar，第一个代码 sn-p 实际上是我正在查看的文件的第 1 到 11 行。也许这就是为什么我对这在 ES6 中的样子感到困惑。当你说它没有意义时，你能详细说明吗？顺便说一句，我添加了更多的原始代码。

标签： javascript oop ecmascript-6

【解决方案1】：

ES6 类语法不提供向现有类添加新方法的方法。为此，您仍然必须使用对classname.prototype.methodname 的赋值。

但是你可以使用 ES6 语法来定义内部的FormSession 类。

但是每次创建FormSession 时定义整个FormSession 类并不是一个好主意。它应该只定义一次，并在createFormSession 方法中使用。如果不希望它进入全局范围，可以在 IIFE 中定义它。

(function() {
  class FormSession {
    constructor(formId, payload, common) {
      this.formId = formId;
      this.payload = payload;
      this.common = common;
    }

    getContainer(clientContext) {
      return xmui.XmuiHandler.getContainer(clientContext);
    }

    startSession(clientContext, actionContext) {
      this.actionContext = actionContext;
      this.clientContext = clientContext;
    }

    promiseFormInput() {
      return this.renderForm();
    }

    renderForm() {
      var _this = this;
      var uiContainer = this.getContainer(this.clientContext);
      return new Promise(function(resolve, reject) {
        uiContainer.append($(
          "<div>\
            <input id='myText' type='text'>\ <
          button id = 'continueButton' > Continue < /button>\ < /
          div > "
        });

        $('#continueButton').click(function() {
          uiContainer.empty();
          var formInput = com.ts.mobile.sdk.FormInput.createFormInputSubmissionRequest({
            data: document.getElementById("myText").value
          });
          resolve(formInput);
        });
      })
    }
    onContinue(payload) {

    }

    onError(payload) {
      alert(JSON.stringify(payload));
    }

    endSession() {

    }
  }

  CustomUIHandler.prototype.createFormSession = function(formId, payload) {
    return new FormSession(formId, payload, this.common);
  }
})();

【讨论】：