打印出 javascript 对象

Question

在下面的示例中，我有两个 console.log，每次都得到不同的答案（尽管我希望得到相同的答案）。

class Dog {
  constructor(name, gender) {
    this.name = name;
    this.gender = gender;
  }
  toString() {
    return this.name;
  }
}

let maxi = new Dog('john', 'male');
console.log(maxi) // Dog { name: 'john', gender: 'male' }
console.log(`${maxi}`); // john

在第一个示例中，似乎我正在记录对象的类型及其属性。 然而，在第二个示例中，我的自定义toString()方法似乎被用于将 object 转换为字符串。

为什么有区别？ 文档中是否有一个地方解释了为什么字符串文字使用 toString() 方法将对象转换为字符串，而 console.log() 没有。 此外，console.log() 甚至在哪里提取 object 的这个字符串表示？

谢谢！

Answer 1

如果您在 chrome 或 firefox 的最新版本中记录对象，那么您记录的内容是对 object 的引用，而在调用 console.log() 时可能不是“值”。 但这是当时object的值。 参考： Mozilla

那么解决此问题的方法是，将您的 object 转换为字符串（您的日志 2），例如：

 class Dog { constructor(name, gender) { this.name = name; this.gender = gender; } toString() { return this.name; } } let maxi = new Dog('john', 'male'); console.log('Dog: ' + maxi) // Dog { name: 'john', gender: 'male' } console.log(`${maxi}`); // {"name":"john","gender":"male"}

这是因为我使用 + 运算符而不是运算符，所以他会将其粘贴到字符串中，而不是引用您的 object。

总结变量不存储 object 的值，而是该值的引用（内存中的地址）。 所以你的副本是引用而不是 object。

Answer 2

因为我认为您的要求是以字符串形式打印 object 所以我在下面有这个解决方案。

哦，我在这里使用了箭头 function。 您可以使用普通的 es5 function。 谢谢你。

class Dog {
  constructor(name, gender) {
    this.name = name;
    this.gender = gender;
  }
  toString() {
    return JSON.stringify(this);
  }
}

let maxi = new Dog('john', 'male');
console.log(`${maxi}`); // {"name":"john","gender":"male"}

Answer 3

我认为 Console.log 在内部使用 toJSON 方法将 object 传输到字符串中。 所以你必须编写自己的 toJSON...

    class Dog {
      constructor(name, gender) {
        this.name = name;
        this.gender = gender;
      }
      toJSON() {
        return this.name;
      }
    }
    let maxi = new Dog('john', 'male');
    console.log(maxi) // Dog { name: 'john', gender: 'male' }
    console.log(`${maxi}`); // john

这真的行不通......正如Bergi告诉我的那样，他是对的。 我在没有删除原始代码的情况下尝试了代码： toString() {... } 并像这样添加 toJSON() {...} 和 '>>>'：console.log('>>>'+maxi) 和以 output //>>>约翰。 所以，我认为 toJSON() 给出了 //>>>john，但它是 toString()。 谢谢伯吉。