JavaScript 闭包编程的静态变量的奇怪行为答案

【问题标题】：Odd behavior of Static Variable of JavaScript closure programmingJavaScript 闭包编程的静态变量的奇怪行为
【发布时间】：2013-05-02 20:02:02
【问题描述】：

为什么这段 JavaScript 代码会产生这个有趣的结果？查看 RowID 和 CellID。

Result: 
[R0C0]: Apple   [R1C1]: 400
[R2C0]: Google  [R3C1]: 700


    <html>
     <head>
      <script src="ClosureAccessStaticVariable.js" type="text/javascript"></script>
      <script src="jquery-1.9.1.js" type="text/javascript"></script>
     </head>
     <body>
      <div id="panelTable"></div>
      <script>
        function Table(dataRows){
        var rows = [];
        this.GetTable = function(){
            var table = $("<table>");
            $(rows).each(function(){
                table.append(this.GetRow());
            });
            return table;
        }
        function init(){
            $(dataRows).each(function(index){
                rows[index] = new TableRow(this);
            });
        }
        function TableRow(rowData){
            var cells = [];
            this.GetRow = function(){
                var row = $("<tr>");
                $(cells).each(function(){
                    row.append(this.GetCell());
                });
                return row;
            }
            function init(){
                var i=0;
                for(var cellName in rowData){
                    cells[i] = new TableCell(rowData[cellName]);
                    i++;
                }
            }
            function TableCell(text){
                this.GetCell = function(){
                    if(TableRow.ID == undefined)
                        TableRow.ID = 0;
                    if(TableCell.ID == undefined)
                        TableCell.ID = 0;

                    var rowId = TableRow.ID;
                    var cellId = TableCell.ID;
                    TableRow.ID = TableRow.ID + 1;
                    TableCell.ID = TableCell.ID + 1;
                    return $("<td style='border:1px solid lightgray;padding:2px;'>").html("[R"+rowId+"C"+cellId+"]: "+text);
                }
            }
            init();
        }
        init();
        }
        var data = [ { Name: "Apple", Value: 400}, {Name: "Google", Value: 700}];
        var table = new Table(data);
        var tableDom = table.GetTable();
        $("#panelTable").append(tableDom);
    </script>
     </body>
    </html>

【问题讨论】：

你能把这个放在 jsFiddle 里吗？调试一堵代码墙并没有那么有趣。我们如何猜测 ClosureAccessStaticVariable.js 中的内容？？
为什么你觉得这个结果很有趣？你还期待什么？
Frenchie：ClosureAccessStaticVariable.js 中有这段代码，只需将其设为 html 页面，即可将其作为 .html 文件运行。
Bergi：这很有趣，因为类中有一个静态变量的概念，但是JavaScript中的类可以定义多次。我希望它表现为 OOP 概念，但事实并非如此。

标签： javascript jquery closures

【解决方案1】：

您正在递增每个单元格中的行：

this.GetCell = function(){
    var rowId = TableRow.ID;
    var cellId = TableCell.ID;
    // The row ID gets updated 
    TableRow.ID = TableRow.ID + 1;
    TableCell.ID = TableCell.ID + 1;

【讨论】：

您在行 ID 上是对的。但是看看 Cell ID，据说 Cell ID 也会每次递增。据说静态变量属于该类。我试图得到的答案是为什么 Cell ID 不会增加，而是为第二行重置。我能想到的一个主要原因是因为我创建了两个 TableRows 对象，而 TableCell 类又被创建了。