【问题标题】:How do I override the default output of an object?如何覆盖对象的默认输出?
【发布时间】:2012-03-30 12:46:58
【问题描述】:

假设在 JavaScript 中我创建了一个简单的对象:

function MyObj() {
    this.prop = "property";
}

现在,如果我创建这个实例并将其输出到控制台,我会看到对象表示:

var obj = new MyObj();
console.log(obj);

我怎样才能使输出变成一个字符串?例如,我希望控制台显示My property value is 'property' 而不是[object object]。

我尝试过使用MyObj.prototype.toString,但它似乎不起作用。

【问题讨论】:

    标签: javascript oop


    【解决方案1】:

    您可以挂钩浏览器控制台,然后重新定义它:

    var obj = {
        name: "Joel",
        age: 32,
        toString: function() {
            return this.name + " is " + this.age + " years old.";
        }
    };
    
    var browserConsole = console;
    
    console = {
        log: function(data) {
            if (typeof data === "object") {
                browserConsole.log(data.toString());
            } else {
                browserConsole.log(data);
            }
        }
    }
    
    console.log(obj);
    

    【讨论】:

    • 太棒了,先生,这对我有用。
    【解决方案2】:

    MyObj.prototype.toString() = function() {} 可以工作,但不会输出到控制台。如果你做类似的事情

    console.log("The object says: " + obj);
    

    ...你会看到toString()的输出

    function MyObj() {
        this.prop = "property";
    }
    MyObj.prototype.toString = function() {
       return "My property 'prop' has the value: '" + this.prop + "'";
    }
    var obj = new MyObj();
    console.log("the object says: " + obj);
    
    // the object says: My property 'prop' has the value: 'property'
    
    // Or call toString() explicitly
    console.log(obj.toString());
    // My property 'prop' has the value: 'property'
    

    【讨论】:

    • 在日志调用中没有显式字符串的情况下有什么方法可以实现这一点?
    • @shanethehat 如果你只想把它转储到日志中,你可以打电话给obj.toString()
    • 我不知道如何修改控制台的行为以调用toString() 而不是转储对象的内容。
    • 这实际上是一道面试题,我想这可能是一个故意的红鲱鱼。要求是 console.log(obj); 会输出一个自定义字符串,但如果这不可能,那就是我的答案。
    • @shanethehat 我没有说不可能,我说我不知道​​怎么做。顺便说一句,对于未来的面试或作业问题,请在我们开始回答之前让我们意识到这一点。我们通常可以猜测它是否是一个直接的家庭作业问题,并采取一些不同的方法来帮助和回答。不过,就您而言,您已经走在正确的轨道上,所以我很乐意提供帮助
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-04-13
    • 2011-01-20
    • 1970-01-01
    • 2015-04-25
    • 2019-05-09
    相关资源
    最近更新 更多