function CreatePerson(name,age){ this.name=name; this.age=age; } // 我们把公有的方法放到函数的原型链上 CreatePerson.prototype.showName = function(){ console.log('我的名字是:'+this.name) } var person1 = new CreatePerson('小明',25) var person2 = new CreatePerson('小华',24) person1.showName() //小明
###### 原型模式的关键:
1)每个函数数据类型(普通函数,类)上,都有一个属性,叫prototype。
2)prototype这个对象上,天生自带一个属性,叫constructor:指向当前这个类;
3)每个对象数据类型(普通对象,prototype,实例)上都有一个属性,
叫做__proto__:指向当前实例所属类的原型;
这3句话理解了,下边的东西就可以不用看了 //手动滑稽
通过例子我们来看这几句话是什么意思
function CreatePerson(name,age){ this.name=name; this.age=age } CreatePerson.prototype.showName=function(){ console.log('我的名字是:'+this.name) } var person1 = new CreatePerson('小明',25); console.dir(person1)
在chrome浏览器控制台中显示
从图中可以看出,person1这个对象上有name和age两个属性,person1的__proto__指向了它的构造函数(CreatePerson)的prototype上,而且还有一个showName的方法。
并且它们中有一条链关联着: person1.__proto__ === CreatePerson.prototype
接着来看
function Foo(){ this.a=1; } Foo.prototype.a=2; Foo.prototype.b=3; var f1 = new Foo; //没有参数的话括号可以省略 console.log(f1.a) //1 console.log(f1.b) // 3
以这个为例,当我们查找f1.a时,因为f1中有这个属性,所以我们得出 f1.a=1;当我们查找f1.b时,f1中没有这个属性,我们便顺着f1.__proto__这条链去它的构造器的prototype上找,所以我们得出了 f1.b = 3;
接着来说,Foo.prototype是个对象,那么它的__proto__指向哪里呢
还记的刚刚说的那句
每个对象数据类型(普通对象,prototype,实例)上都有一个属性,叫做__proto__:指向当前实例所属类的原型
此外,我们应该知道
每一个对象都是function Object这个构造函数的实例
所以我们可以接着还原这个原型图
等等,图上貌似多了个个Object.prototype.__proto__ 指向了null,这是什么鬼?
我们这么来理解,Object.prototype是个对象,那么它的__proto__指向了它的构造函数的prototype上,最后发现了还是指向它自身,这样转了个圈貌似是无意义的,于是便指向了null还没完,我们发现对象都是函数(构造器)创造出来的,那么函数是谁创造的呢?石头里蹦出来的么?
在js中,function都是由function Function这个构造器创造的,每一个函数都是Function的实例
现在基本上我们就能得出了完整的原型图了
是不是有点乱?根据我们刚刚讲的是能把这个图理顺的,这里需要注意下,Function.__proto__是指向它的prototype的
多说一点,判断数据类型的方法时,我们知道有个instanceof的方法
比如
A instanceof B
instanceof判断的规则就是: