Question

我在javascript类中有两个函数，我试图从另一个内部调用其中一个，但是它不起作用。为什么会这样？

class Grid {

  paintGrid() {
    $("td").on("click", function() {
        var color = $("#colorPicker").val();
        $(this).css( "background-color", color);
    })
  }

  makeGrid() {
    $("#sizePicker").one("submit", function(e) {
        let height = $("#inputHeight").val();
        let width = $("#inputWeight").val();
        var vertical;
        for (var i = 1; i <= height; i++) {
            var vertical = document.createElement("tr");
            for (var j = 1; j <= width; j++) {
                var horizontal = document.createElement("td");
                vertical.append(horizontal);
                $("#pixelCanvas").append(vertical);
            }
        };
        e.preventDefault();
        this.paintGrid();
    })
  }
}

let creation = new Grid();
creation.makeGrid();

问题是：当我用this.paintGrid()替换其中的函数时，它就起作用了。因此，我相信错误在于我的称呼方式。

Answer 1

为您提供2种解决方案：

将this分配给变量

makeGrid() {
   var self = this;
   $("#sizePicker").one("submit", function(e) {
      //...
      self.paintGrid();
   })
}

使用箭头功能

makeGrid() {
   $("#sizePicker").one("submit", (e) => {
      //...
      this.paintGrid();
   })
}

在javascript函数中，将this绑定到调用者。箭头函数将this绑定到当前上下文-在这种情况下为类实例。

您可以查看Function vs Arrow以获得更多信息

如何在JavaScript的同一类中调用函数？

1 个答案: