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