Question

我有这个es6课程：

class CommentsController {
  constructor() {
    this.$addCommentForm = $('.add-comment')
    this.$addCommentButton = $('.add-comment input[type=submit]')
  }

  init() {
    this.addCommentFormListener();
  }

  addCommentFormListener() {
    this.$addCommentButton.on('click', function(e) {
      e.preventDefault();

      let imageId = parseInt($(this).parents('ul').data('id'));
      let inputText = $(this).parents('ul').find('.user-text').val();
      let comment = new Comment(inputText, imageId);
      debugger;
      CommentsController.renderComment(comment, imageId)
    });
  }

  renderComment(comment, imageId) {
    let image = Image.all[imageId]
    image.comments.push(comment)
    $('#images').find(`ul[data-id=${imageId}] ul#comments-${imageId}`).append(`<li>${comment.text}</li>\n`);
  }
}

问题是在调试器中，我想调用renderComment函数但我不能，因为this不再引用控制器。我该怎么办？

Answer 1

使用arrow function代替功能：

箭头功能没有自己的功能;这个值使用封闭执行上下文。

但是，现在您可以从this获取点击的元素，因为this指的是实例。而是使用Event.target获取点击的元素：

  addCommentFormListener() {
    this.$addCommentButton.on('click', (e) => {
      e.preventDefault();

      const $el = $(e.target);
      const imageId = parseInt($el.parents('ul').data('id'));
      constinputText = $el.parents('ul').find('.user-text').val();
      const comment = new Comment(inputText, imageId);

      this.renderComment(comment, imageId)
    });
  }

es6在类中调用类方法，但也在单击函数内调用

1 个答案: