打印出 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() 方法似乎被用于将对象转换为字符串。

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

谢谢！

Answer 1

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

那么如何解决这个问题，将你的对象转换成一个字符串（你的日志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"}

这是可行的，因为我使用 + 运算符而不是 , 运算符，因此他会将其粘贴到字符串中，而不是引用您的对象。

总结 变量不存储对象的值，而是该值的引用（内存中的地址）。所以你复制那个引用而不是对象。

Answer 2

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

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

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 方法将对象传输到字符串。所以必须自己写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) 和输出//>>>约翰。所以，我认为 toJSON() 给出了 //>>>john，但它是 toString()。谢谢你，Bergi。