时间戳

首页 > 解决方案 > 为什么当我运行与 onclick 属性绑定的函数时我的类属性未定义？

javascript - 为什么当我运行与 onclick 属性绑定的函数时我的类属性未定义？

问题描述

我正在尝试制作一个 noughts and crosses 游戏，每个单元格都是 Cell 类的对象，每个类都将包含多个属性，例如特定单元格在 HTML 中绑定到的 div 元素，这样我就可以更改其样式div 如果它被点击。

但是，当尝试将每个 Cells onclick 属性分配给类中的方法时，我在构造函数中定义的类变量未定义。我无法解决它的范围，我尝试 var self = this; 在构造函数中使用并使用它而不是 this 作为方法。我已经阅读了与此类似的其他多个问题，但是我似乎无法解决问题。

   class Cell 
    {    

        constructor(cellDiv) 
        {
            this.clicked = false;
            this.cellDiv = cellDiv;
            this.player = 7;
            this.cellDiv.className = "cell";      
        }
        output()
        { 
            console.log(this.player);
            console.log(this.clicked);
            console.log(this.cellDiv);
        }        
    }

    var grid = [];

    function buildBoard ()
    {
        for (var i = 0; i < 9; i ++)
        {
            grid.push(new Cell(document.createElement("div")));

            document.getElementById("gameBoard")
            .appendChild(grid[i].cellDiv);


            grid[i].cellDiv.onclick = grid[i].output;

            grid[i].output();

        }


    }

    <!DOCTYPE html>
    <html lang = "en">
         <head>
            <meta charset = "UTF-8">
            <title>Task 3</title>
            <link rel = "stylesheet"; type = "text/css"; href = "stylesheet.css" />
        </head>


    <body>
    <script type = "application/javascript"; src ="main.js"></script>
    <script type = "application/javascript"; src ="cell.js"></script>


        <div class = "gameBoard"; id = "gameBoard"></div>







    <script type="text/javascript">
        buildBoard();
    </script>

    </body>

</html>

目前这会创建 9 个单元格，将它们全部放在板上，分配它们的 onclick 属性，然后输出我单击单元格时期望输出的内容。但是，当在 for 循环中调用输出函数时，一切都按预期输出，但是当我单击每个 div 时，我收到未定义的变量。

<code>
main.js:38 7
main.js:39 false
main.js:38 undefined
main.js:39 undefined
</code>

干杯!

标签： javascriptclass

解决方案

您需要将该output方法绑定到您的类。有多种方法，但最紧凑的方法是将其分配给箭头函数。

class Cell {
  constructor () { ... }

  output = () =>                                                                                    
  {                                                                                                 
    console.log(this.player);                                                                     
    console.log(this.clicked);                                                                    
    console.log(this.cellDiv);                                                                    
  }
}

推荐阅读