控制台打印的vue组件实例，怎么看？

Question

我是在vue组件里通过console.log(this)打印出来的上图。
谁能帮我解读一下打印出来的东西怎么看？

1. 为什么打印的出对线，是有名字的？？正常来讲打印出来的东西不是不会标名字吗？例如下图：

1. 同上，也是有名字

2. 这些浅色的属性是什么属性？我本来以为是原型链上的属性，但是proto上的同样是浅色，所以浅色表示什么类型的属性？

1 2 知道了，是构造器的名字，但是3是什么意思还是不知道

Answer 1

你打印出来的是某个非原生类的实例就有名字：function A(){}var a = new A();console.log(a); // => A {}var b = {};console.log(b) // => {}, 比如Object类的实例不会显示Object//第三点是设置对象属性的可枚举/可读可写：var c = {c1: 'xxx'};Object.defineProperty(c, "c2", {  enumerable: false,  configurable: false,  writable: false,  value: "c2"});console.log(c); //c1就是显示的，c2是隐式的c.c1 = "666";c.c2 = '666';console.log(c); // =>{c1: "666", c2: "c2"},c1能写，c2的值不能 for(var cItem in c){  console.log(cItem + ': ' + c[cItem]);} // => 'c1: 666'，c1能被枚举，c2不能。

Answer 2

解决方案：复写console.log()