Chrome DevTools显示对象的特点

昨天在看Js中有关原型对象、instanceof运算符的资料时，遇到了一件很奇怪的事情。以下是我测试时用的代码，测试的环境是Chrome。

function Teacher(name, age) {
    	this.name = name;
    	this.age = age;
    }
    Teacher.prototype.sayName = function() {
    		alert(this.name);
    	};
    Teacher.prototype.sayHi = function() {
    		alert("Hi, I'm " + this.name);
    	};

    console.log(Teacher.prototype instanceof Teacher);	// false
    console.log(Teacher.prototype instanceof Object);	// true
    console.log(Teacher.prototype);	// Teacher {sayName: function, sayHi: function}
    console.log(Teacher.prototype.__proto__ === Object.prototype);  // true

奇怪的地方就是第一个console.log与第三个的输出两者之间是矛盾的。第一句表示Teacher的原型对象不是Teacher的实例，而第三句的输出却显示Teacher的原型对象是Teacher的实例。

但是根据第四句的结果，可以知道在Teacher的原型对象的原型链中只有它自己和Object的原型对象，以图来表示会更清晰一些：

instanceof运算符的语法为：obj  instanceof  Func，其工作原理是检查对象obj的原型链中是否存在构造函数Func的原型对象，如果有，则返回true。从图中我们可以看到，在Teacher的原型对象的原型链中只有Object的原型对象，所以instanceof运算符认为Teacher的原型对象仅仅只是Obejct的实例（Js中所有对象都是Object的实例，这一点毋庸置疑）。

那么为什么在Chrome中会将Teacher.prototype显示为Teacher的实例呢？原因是Chrome的DevTools通过检查对象的constructor属性（这是一个原型属性）来判断对象的类型，它假设对象是其constructor属性所指向的构造函数的实例。这种方式对所有非原型对象都能工作得很好，而且也很合理。但是对于原型对象来说，情况就不同了。因为constructor属性是原型对象的实例属性，实例属性会屏蔽掉与其同名的原型属性。这正是导致Chrome会认为原型对象是构造函数实例的根本原因。因为Teacher的原型对象中的constructor属性屏蔽了Object的原型对象中的同名属性，且该属性指向的是构造函数Teacher，所以Chrome认为Teacher.prototype是Teacher的实例。