如何防止在 ES6 中覆盖上下文 this [重复]

Question

与How to prevent jquery to override "this" 非常相似，但在 ES6 中。

这是我的课：

class FeedbackForm {
  constructor(formEl) {
    this.$form = $(formEl)
    this.$form.submit(this.sendStuff)

    this.alerts = $('#something');
  }

  /**
   * Sends the feedback
   * @param {Event} e
   */
  sendStuff(e) {
    e.preventDefault()

    if (this.alerts.length) {
      window.alert('Notice... stuff')
    }

    $.ajax({
      type: this.$form.prop('method'),
      url: this.$form.prop('action'),
      data: this.$form.serialize()
    }).done(() => window.location.reload(true))
  }
}

sendStuff 方法是表单的事件处理程序，我相信 jQuery 使用Function.prototype.apply 调用它。因此，sendStuff 中的 this 被 jQuery 应用的事件目标覆盖，我无法访问 this.alerts 或任何其他属性方法。

我不确定是否可以在此处应用 var that = this 技巧或如何解决此问题？

Answer 1

您可以使用arrow function：

与函数表达式相比，箭头函数表达式（也称为胖箭头函数）具有更短的语法并在词法上绑定 this 值

应该这样做：

this.$form.submit(e => this.sendStuff(e));

Answer 2

您可以使用符号将FeedbackForm 实例与表单元素相关联。

然后，在事件监听器内部，this 或e.currentTarget 将成为表单元素。使用您检索FeedbackForm 实例的符号。

const myFeedbackForm = Symbol();
class FeedbackForm {
  constructor(formEl) {
    formEl[myFeedbackForm] = this;
    this.$form = $(formEl);
    this.$form.submit(this.sendStuff);
    this.alerts = $('#something');
  }
  sendStuff(e) {
    e.preventDefault()
    if (this[myFeedbackForm].alerts.length) {
      window.alert('Notice... stuff')
    }
  }
}
new FeedbackForm(document.forms[0]).$form.submit();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form></form>
<div id="something"></div>

限制是您不能将同一个表单元素与不同的FeedbackForm 实例相关联。

Answer 3

尝试在主函数的两个函数范围之外初始化第二种存储变量：

var that;
class FeedbackForm {

  constructor(formEl) {
    this.$form = $(formEl)
    this.alerts = $('#something');
    that = this;

    this.$form.submit(this.sendStuff)    
  }

  /**
   * Sends the feedback
   * @param {Event} e
   */
  sendStuff(e) {
    e.preventDefault()

    if (that.alerts.length) {
      window.alert('Notice... stuff')
    }

    $.ajax({
      type: that.$form.prop('method'),
      url: that.$form.prop('action'),
      data: that.$form.serialize()
    }).done(() => window.location.reload(true))
  }
}