javascript - 自定义我的对象在 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，但至少这就是您所要做的。除此之外，您还必须制作自己的记录器方法，或使用完全自定义的对象。