如何在不调用 toString() 方法的情况下记录对象？

Question

如何在控制台上记录对象的所有属性？ console.log() 在某些情况下似乎不够。

举个例子：

function Person(name) {
    this.name = name;
}

console.log(Person);
console.log(Person.prototype);

var person = new Person('john');

console.log(person);

在 Google Chrome，这将记录：

function Person(name) {
    this.name = name;
}
> Object
Person {name: "john"}

第一条和第三条日志不会显示对象的所有属性。我无法展开（就像在第二个日志中那样）以查看 [[Prototype]] 或任何其他属性.

Answer 1

如下声明Class对象，下面的代码是ES6的转译版本class

Class ES6

class Person {
  name= null;
}

通过 https://babeljs.io/repl/

完成的转译代码

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Person = function Person() {
  _classCallCheck(this, Person);

  this.name = null;
};

var p= new Person();
console.log(p);
p.name = "John";

console.log(p)

Answer 2

您需要了解 prototype 属性与 constructor 属性不同。

查看代码：

function Person(name) {
this.name = name;
}
Person.length = 1; 
Person.aaaaq = 1; 
console.log(Object.getOwnPropertyNames(Person))
console.dir(Object.getOwnPropertyNames(Person))
Person.prototype.gender = "male";
console.log(Person);
console.log(Person.prototype);
var person = new Person('john');
console.log(person);

prototype属性可以考虑作为一个对象的模板，当new一个对象时，所有prototype属性将存储到__proto__，当你尝试访问 gender，它会先查找 constructor 属性，如果不存在，它会去 __proto__ 查找这个属性.

最终输出将是：

["length", "name", "arguments", "caller", "prototype", "aaaaq"]
Array[6]0: "length"1: "name"2: "arguments"3: "caller"4: "prototype"5: "aaaaq"length: 6__proto__: Array[0]
Person(name) {
this.name = name;
}
Object {gender: "male"}
Person {name: "john"}

希望这会消除您的困惑。请查看此演示：https://jsfiddle.net/jtwqgdvd/1/

Answer 3

使用console.dir()查看原型和所有构造函数

如何在不调用 toString() 方法的情况下记录对象？

How do I log an object without having its toString() method called?

javascript

google-chrome

console.log