对于原型链,在《javascript高级程序设计》中有讲解,但有些词汇太过于专业,对于新手来讲,有些难以理解。在讲解原型链之间,在此我们要先搞清除原型的搜索机制。在《javascript高级程序设计》中有这样一段话很重要:
虽然可以通过对象实例访问保存在原型中的值,但却不能通过对象实例重写原型中的值。如果我们在实例中添加了一个属性。该属性将会屏蔽原型中的那个属性。来看下面的例子。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> function Person(){} Person.prototype.name="Nicholas"; Person.prototype.age=23; Person.prototype.job="Software Engineer"; Person.prototype.sayName=function(){ document.write(this.name); } var person1=new Person(); var person2=new Person(); person1.name="xiaohong"; document.write(person1.name); document.write("<br>"); document.write(person2.name); </script> </body> </html>output:
xiaohong Nicholas
从上面的输出结果可以看出,先是在实例对象中查找属性”name”的值。
下面我们再来看看《javascript高级程序设计》6.3章节所讲的继承。继承开篇讲到了原型链,其实其中所讲到的原型链对于一个新手来说,一开始看起来有点模糊,不好理解,我是先从它的代码实例入手的,如果看代码还是不能理解,那就先动手敲一敲代码,不要急着一步到位的理解,先感受一下它输出的结果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> function SuperType(){ this.prototype=true; } SuperType.prototype.getSuperValue=function(){ return this.prototype; } function SubType(){ this.subproperty=false; } SubType.prototype=new SuperType(); SubType.prototype.getSubValue=function(){ return this.subproperty; } var instance=new SubType(); document.write(instance.getSuperValue()); </script> </body> </html>output: true
通过上述代码,在结合书中所讲的概念,反反复复的揣摩一下,就能大致理解其意。
通过实现原型链,本质上扩展了前面介绍的原型搜索机制。当以读取模式访问一个实例属性时,首先会在实例中搜索改属性。如果没有找到该属性,则会继续搜素实例的原型。在通过原型链实现继承的情况下,搜索过程就得沿着原型链继续向上,就拿上面的例子来说,调用instace.getSuperValue()会经历三个搜索步骤: 1:搜索实例; 2:搜索原型SubType.prototype; 3:搜索SuperType.prototype. 最后一步才会找到该方法。再找不到属性与方法的情况下,搜索过程总是要一环一环地前行到原型链末端才会停下来。