自定义我的对象在 JS 控制台中的显示方式

Question

我已经实现了这个不可变的 Pos 对象：

var Pos = function(x, y) {
    var _x = x;
    var _y = y;
    return {
        x: function() { return _x; },
        y: function() { return _y; },
    };
}

现在当我向控制台写入new Pos(5, 7)时，显示如下：

▶ Object {x: function, y: function} // Chrome
Object { x: Pos/<.x(), y: Pos/<.y() } // Firefox

这根本没有用，因为我看不到 x 和 y 的值。我可以创建一个自定义函数来记录 x 和 y，但这真的不是那么好，而且我会失去扩展对象并在内部导航的有用可能性（想象更复杂的对象，Pos只是一个例子）。

如果它是在 C# 中，我会直接覆盖 ToString()，然后 Visual Studio 会自动在调试器中使用它来显示我的对象。

然而在 JS 中实现 toString 似乎根本没有帮助。有什么方法可以在控制台中轻松查看我对象的 x 和 y 吗？

Answer 1

您可以在 chrome 中获得更好的控制台行为，也许其他人使用 ES5 getters:

function Pos(x, y) {
    return {
        get x() { return x; },
        get y() { return y; },
    };
}
console.log( Pos(1,5) );

为了避免可能的浪费 cpu，chrome 在您单击它之前不会在控制台中计算 getter，但至少这就是您所要做的。除此之外，您还必须制作自己的记录器方法，或使用完全自定义的对象。

自定义我的对象在 JS 控制台中的显示方式

Customizing how my object is displayed in the JS console

javascript

debugging

console.log