深入理解Javascript的继承和原型链.docx

深入理解Javascript的继承和原型链

在上一篇文章中，介绍了原型的概念，了解到在javascript中构造函数、原型对象、实例三个好基友之间的关系：每一个构造函数都有一个“守护神”——原型对象，原型对象心里面也存着一个构造函数的“位置”，两情相悦，而实例呢却又“暗恋”着原型对象，她也在心里留存了一个原型对象的位置。javascript本身不是面向对象的语言，而是基于对象的语言，对于习惯了其他OO语言的人来说，起初有些不适应，因为在这里没有“类”的概念，或者说“类”和“实例”不区分，更不要指望有“父类”、“子类”之分了。那么，javascript中这一堆对象这么联系起来呢？幸运的是，javascript在设计之初就提供了“继承”的实现方式，在认识“继承”之前，我们现在先来了解下原型链的概念。原型链我们知道原型都有一个指向构造函数的指针，假如我们让SubClass原型对象等于另一个类型的实例newSuperClass()会怎么样？此时，SubClass原型对象包含一个指向SuperClass原型的指针，SuperClass原型中也包含一个指向SuperClass构造函数的指针。。。这样层层递进下去，就形成了一个原型链。具体代码如下：functionSuperClass(){this.name="women"}SuperClass.prototype.sayWhat=function(){returnthis.name+":i`magirl!";}functionSubClass(){this.subname="yoursister";}SubClass.prototype=newSuperClass();SubClass.prototype.subSayWhat=function(){returnthis.subname+":i`mabeautifulgirl";}varsub=newSubClass();console.log(sub.sayWhat());//women:i`magirl!使用原型链实现继承通过上面的代码中可以看出SubClass继承了SuperClass的属性和方法，这个继承的实现是通过将SuperClass的实例赋值给SubClass的原型对象，这样SubClass的原型对象就被SuperClass的一个实例覆盖掉了，拥有了它的全部属性和方法，同时还拥有一个指向SuperClass原型对象的指针。在使用原型链实现继承时有一些需要我们注意的地方：注意继承后constructor的变化。此处sub的constructor指向的是SuperClass，因为SubClass的原型指向了SuperClass的原型。在了解原型链时，不要忽略掉在末端还有默认的Object对象，这也是我们能在所有对象中使用toString等对象内置方法的原因。通过原型链实现继承时，不能使用字面量定义原型方法，因为这样会重写原型对象（在上一篇文章中也介绍过）：functionSuperClass(){this.name="women"}SuperClass.prototype.sayWhat=function(){returnthis.name+":i`magirl!";}functionSubClass(){this.subname="yoursister";}SubClass.prototype=newSuperClass();SubClass.prototype={//此处原型对象被覆盖，因为无法继承SuperClass属性和方法subSayWhat:function(){returnthis.subname+":i`mabeautifulgirl";}}varsub=newSubClass();console.log(sub.sayWhat());//TypeError:undefinedisnotafunction实例共享的问题。在前面讲解原型和构造函数时，我们曾经介绍过包含引用类型属性的原型会被所有的实例共享，同样，我们继承而来的原型中也会共享“父类”原型中引用类型的属性，当我们通过原型继承修改了“父类”的引用类型属性后，其他所有继承自该原型的实例都会受到影响，这不仅浪费了资源，也是我们不愿看到的现象：functionSuperClass(){this.name="women";this.bra=["a","b"];}functionSubClass(){this.subname="yoursister";}SubClass.prototype=newSuperClass();varsub1=newSubClass();sub1.name="man";sub1.bra.push("c");console.log(sub1