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

我在一个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();

类网格{
paintGrid（）{
$（“td”）。在（“单击”，函数（）{
var color=$（“#colorPicker”）.val（）；
$（this.css（“背景色”，color）；
})
}
makeGrid（）{
$（“#sizePicker”）.1（“提交”，函数（e）{
设高度=$（“#输入高度”）.val（）；
让宽度=$（“#输入权重”）.val（）；
垂直变异系数；
对于（var i=1；i有两种解决方案：

将此
分配给变量

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


使用箭头函数

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


在javascript函数中，将此

绑定到调用方。 Arrow函数将

此

绑定到当前上下文-本例中的类实例

---

您可以查看更多信息

回调中的此

引用的是

#sizePicker

，而不是类的实例。这不是问题所在。测试此代码并使其工作：

类网格{paintGrid（）{console.log（'paintGrid called'）；}makeGrid（）{console.log（'makeGrid'）；this.paintGrid（）；}}const grid=new grid（）；grid.makeGrid（）；

…所以调用函数的方式不是这样的。@Teemu sayes的说法很有道理。您定义了两次垂直。@Teemu，是的。回调肯定是这里的一个关键方面。