基本看过高程等书的人都可以对原型继承,原型链查找侃侃而谈,代码中也可以使用原型完成一些事情,但是,我们对于原型真的彻底搞明白了么?
原型由构造器确定
我们的原型是一个对象,构造器函数有一个属性指向这个对象,prototype;而我们每次new出来的实例也有一个属性指向这个对象,__proto__。为什么说原型是由构造器确定的,因为在new之后,这个实例的原型就已经确定了,实例的__proto__和构造器的prototype都会指向那个原型对象。
var Person=function(){};
var p=new Person();
console.log(p.__proto__===Person.prototype); // true
Person.prototype={
say:function(){
console.log("hello");
}
}
var t=new Person();
console.log(t.__proto__===Person.prototype); // true
t.say(); // hello
console.log(p.__proto__===Person.prototype); // false
p.say(); // 报错
这段代码就很好的说明了这个问题。实例p通过构造器函数Person创建出来(new)之后,它的__proto__和Person的prototype指向同一个对象,所以console的时候相等。然后,我们改变一下构造器函数Person的原型指向,并创建了一个实例t,我们发现t的__proto__和Person的prototype的指向依旧是一致的,但是因为Person.prototype已经改变了,而p.__proto__依旧指向原来的原型对象,所以p.__proto__和现在的Person.prototype指向的对象并不是同一个,会返回false。证据就是p.say()会报错,但是t.say()可以返回正确的值。
原型链查找,是通过实例的属性
看下面的代码:
var Person=function(){};
var p=new Person();
Person.prototype.say=function(){
console.log("1");
}
p.say(); //1
我们先创建了实例,再给原型添加方法,最后调用时,依旧可以返回正确结果,这说明p.say()是一个查找的过程,它会去原型对象里查找相应的方法,如果有返回结果,没有就会报错。
那么,既然是通过实例调用的方法,自然也是通过实例的__proto__属性去访问到那个原型对象,如何证明?我们看下面的代码:
var Person=function(){};
var p=new Person();
Person.prototype.say=function(){
console.log(1);
}
p.say(); //1
p.__proto__={
say:function(){
console.log(2);
}
}
p.say(); //2
当我们重写p.__proto__之后,相当于p这个实例的原型就是我们重写的这个对象。无论我们对Person.prototype添加任何方法,p这个实例都访问不到这些方法,因为原型链查找通过的是__proto__属性,而现在,p.__proto__和Person.prototype指向的其实是不同的两个对象了。
原型是客观存在的
当我们new了一个实例之后,原型对象就已经存在了,实例的__proto__和构造器的prototype都会指向它。而创建实例之后,我们如果修改了__proto__或者prototype,其实都是在修改那个唯一的原型对象。要是我们重写了__proto__或者prototype,原型对象依旧存在,但是通过__proto__或者prototype只能访问到重写的那个对象。所以我们一直在强调,new是一个分界线,new的过程就是把实例的__proto__指向构造器的prototype所指向的那个对象。
看点例子:
var Person=function(){};
var p=new Person();
var t=new Person();
p.__proto__.say=function(){
console.log(1);
}
p.say(); //1
t.say(); //1
p.__proto__={
say:function(){
console.log(2);
}
}
p.say(); //2
t.say(); //1
Person.prototype={
say:function(){
console.log(3);
}
}
var x=new Person();
p.say(); //2
t.say(); //1
x.say(); //3
如果你对上述代码没有任何疑问,那么,你应该是真的懂了原型。