昨天在看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的实例。