Js原型prototype

Js原型prototype一、初识原型JS的引用类型会内置一个特殊的属性prototype。

默认的prototype是object类型的，是引用类型。

既然默认的prototype是object类型的，那么prototype也会有一个原型，并且指向object的原型。

另外补充一点，function的原型可直接访问，object的不行。

示例：function SuperType(){};SuperType.age=18;SuperType.prototype.color=[“red”,”blue”];var t1=new SuperType ();=”hh”;var t2=new SuperType ();t2.qq=”aa”;SuperType，t1，t2原型关系示意图：定义function SuperType时，编译器会为其分配一个prototype属性，并在内存中开辟一片区域用于存放SuperType的原型的数据，假设这片区域的地址为0xA。

然后让SuperType的prototype指向0xA。

由SuperType创建出来的t1和t2的prototype也指向内存地址0xA。

如果有SuperType.prototype.color.push(“green”)，则t1和t2的color也会变为[“red”,”blue”,”green”]。

因为SuperType，t1，t2的原型指向的是同一个地址的数据。

这个过程可以这么比喻：把原型比喻为你的银行卡账户，假设有一万块钱。

当有人盗刷你的银行卡，刷走了4000，然后你去银行查看你账户余额，当然的会剩下6000。

因为你跟盗刷你银行卡的人所持的银行卡指向的是同一个账户。

SuperType.prototype.color.push(“green”)后，示意图如下：SuperType，t1，t2原型关系示意图：另外要注意的是，prototype也是object类型的，是Object的一个实例。

所以完整示意图如下：二、原型链其实在上面的示意图中，顺着箭头走，如Test—>Test的原型—>Object的原型，就是一条原型链了。

当然t2—>Test的原型—>Object的原型也是一条原型链。

下面对原形链进行补充，说明原型链在继承体系中是怎么工作的。

示例：function SuperType(){};SuperType.age=18;SuperType.prototype.color=[“red”,”blue”];function SubType(){}SubType.property=”property”;SubType.prototype=new SuperType();SubType.prototype.test=function(){alert(“test ”);}function Child(){}Child.prototype=new SubType();var t1=new SuperType (); =”hh ”;var t2=new SuperType (); t2.qq=”aa ”;var s=new SubType(); var c=new Child();注意，SubType 的原型被重新赋值了，SubType.prototype=new SuperType(); 所以SubType 的原型是SuperType 的一个对象实例。

上述代码的原型链示意图如下：Subtype 并排放说到这里，原型链已经呼之欲出了。

假设有这样的调用，c.toString();于是就会从上图的c开始沿着箭头到Child的原型，再到SubType的原型，到最后Object的原型，找到toString，然后执行。

如果到Object的原型还没找到toString，那么就会报错。

如果是这么调用，c.test()，那么就会沿着原型链，找到SubType的原型，从中找到test，然后执行。

从上图也可以看到，SuperType的age，只能SuperType自己引用。

t2的qq也只能t2引用。

它们都是实例属性。

这便是原形链的工作机制。

三、重置原型要重置原型，只要对原型重新赋值即可。

例如：function Person(){}Person.prototype={name:”Leo”}需要注意的是，Person原型重写后，Person的原型为{ name:”Leo”}。

{ name:”Leo”}是一个匿名的Object实例，所以其constructor，为Object。

也就是说重写后Person的原型的constructor为Object。

如果constructor很重要，可以为其增加一个constructor 属性，如下：Person.prototype={name:”Leo”,constructor:Person}不过此时还会有一个问题，这样设置的constructor将会使constructor变成是可枚举的。

所以，如果想让它变为不可枚举的，可用Object.defineProperty进行设置四、原型的动态性示例：function Person(){}var p=new Person();Person.prototype.sayHi=function(){alert(“Hi”);};p.sayHi();//这里没问题，因为p在调用sayHi时，会先从自身找sayHi，找不到则会沿//着原形链去寻找，然后在Person的原型中找到了sayHi，于是就执行原型动态性之-------重写原型的问题function Person(){}var p=new Person();Person.prototype={sayName: function(){alert(“Hi”);},constructor:Person}p.sayName();//此时将会报错，p没有sayName方法这里为何p.sayName会报错，Person的原型不是有sayName么？且看下面的示意图：原型重写前的示意图：原型重写后的示意图：从图中可以看出Person重写原型后，又分配了一片内存区域，用于存储新的Person原型，原先的Person原型依然存在，p指向的就是原先的没有sayName属性的Person原型。

所以p调用sayName会找不到这个属性，于是报错。

五、原型共享所引发的问题原型的优点就是共享。

例如：function Person (){}Person.prototype.sayName=function(){};var p1=new Person ();var p2=new Person ();在原型中定义sayName函数，于是p1，p2对象有同一个sayName。

而不会在内存中分配两次内存来分别存放p1的sayName和p2的sayName。

而缺点也是由共享所致。

共享对于函数而言，是合适的，但是对于其他属性而言，可能就会出问题。

示例如下：function Person(){}Person.prototype.color=[“red”,”green”];var p1=new Person();var p2=new Person();alert(p1.color);//输出red,greenalert(p2.color); //输出red,greenp2.color.push(“blue”);alert(p1.color); //输出red,green,blue。

注意，这里我并没有更改p1的coloralert(p2.color); //输出red,green,blue这里我们可以发现，p2的color进行更改之后，p1的color也跟着更改，这正是原型共享所引发的问题六、原型链与instanceof实现原理假设a instanceof b，那么会从a的原形链中找出是否有跟b的原型相等的原型，如果找到则返回true，否则返回false。

示例如下：function SuperType(){}function SubType(){}function Test(){}SubType.prototype=new SuperType();var s=new SubType();console.log(s instanceof SubType);//打出true，这是因为s的原型等于SubType的原型SubType.prototype=new SuperType();console.log(s instanceof SubType);//打出false，这是因为SubType的原型变了，而s还//是原来的SubType的原型上面代码的工作过程是这样的：先说s的原型：s由SubType构造而来，SubType原型由SuperType构造而来。

所以有这样的关系，①、s.prototype=SubType.prototype= new SuperType();②、s.prototype.prototype=SuperType.prototype;于是第一个s instanceof SubType时，会先这样判断s.prototype是否跟SubType.prototype是同一个对象，用表达式表示的话就是这样，判断s.prototype==SubType.prototype，如果相等结果返回true。

在第二次s instanceof SubType时SubType.prototype重新new了一次，于是s.prototype==SubType.prototype就返回false了。

但是s的原形链还没到终点，于是再判断s.prototype.prototype==SubType.prototype，此时仍然是false，而s的原形链也已经到了终点，于是返回false，所以第二次s instanceof SubType的运算结果就是false。

以此类推，如果是s instanceof SuperType那么会先这样s.prototype==SuperType.prototype显然是false，于是沿着原形链，继续判断s.prototype.prototype==SuperType.prototype，此时返回true。

于是s instanceof SuperType的结果就是true。

说明：s是object类型，所以s的原型是不可以直接引用的，即s.prototype是会报错的，这里这么表示只是为了不想画图，又要表述方便，所以采用这种方式进行说明。