让console.log()显示自定义对象描述

Question

我有一个自定义的JS对象，用来表示一个网格。为了简化该示例，它如下所示：

function Grid(c, r)
{   
    var layout = [];
    var contentPointer = 0;

    this.getCell = function(c, r)
    {
        //Return selected cell
    }

    this.getRow = function(r)
    {
        //Return selected row
    }

    this.getCol = function(c)
    {
                //Return selected column
    }

    for(var row = 0; row < r; row++)
    {
        layout[row] = [];
        for(var col = 0; col < c; col++)
            layout[row][col] = 0;
    }
}

我在这里创建了多个实例，使用var aGrid = new Grid(10, 10);，然后以各种方式操作它们; 添加/更新单元格的内容等。

我想做的是调用console.log(aGrid);并能够自定义控制台显示的内容，例如，我添加的所有单元格值的字符串或类似的东西。

我习惯于使用Actionscript，在那里我们将使用trace(aGrid);代替console.log(aGrid);，但在AS3中，我可以重写对象的toString()方法，并更新控制台输出中显示的内容。

我已经看到我可以在JS中向我的网格对象添加toString()方法，但控制台似乎不使用它，除非我明确调用console.log(aGrid.toString());。虽然这很好，但我想知道是否有一种方法可以解决这个问题。

控制台实际上是基于被记录对象的某些可覆盖方法生成其输出，还是进行一些疯狂的内部魔法来获取值？

使用alert(aGrid);似乎使用toString()并捕获自定义值，但我宁愿剥下自己的皮也不想使用alert();来调试一个大项目：）

非常欢迎任何和所有的评论。谢谢。

PS-我不知道不同的浏览器如何处理console.log()，但我正在使用Chrome v33。

- popClingwrap

Answer 1

我发现在JavaScript中，可以为Grid对象添加一个toString()方法，但控制台似乎不会使用它，除非我专门调用console.log(aGrid.toString())。虽然这样做也可以，但我想知道是否有其他方法解决这个问题。事实上，没有其他办法。控制台决定如何显示传递的参数，而Chrome控制台允许您动态检查对象，而不是尝试以某种方式对其进行序列化。如果您想要自定义输出，则需要传递一个字符串。

- Bergi

Answer 2

您可以使用 console.table() 来实现此操作。console.table 允许您指定要查看的属性。例如：

console.table(aGrid);                            // will show all properties
console.table(aGrid, 'firstName');               // will show only firstName property
console.table(aGrid, ['firstName', 'lastName']); // will show firstName and lastName properties 

- Vlad Bezden

Answer 3

console.log 接受对象作为参数，如果你将其放在那里，你就可以在 Chrome 控制台中检查它。

因此，删除 .toString() 就可以解决问题了。

console.log("aGird", aGrid );

- SergeS