代码改变世界

JavaScript中的继承

2013-10-07 01:24  二当家的  阅读(751)  评论(0编辑  收藏  举报

 主要有:

  • 构造函数继承(类继承)

  • 原型继承

  • 掺元类(拷贝继承)

构造函数继承的实现方式主要是借助于JavaScript中的 call , apply 方法可以绑定this的特点,以及使用 new 关键字生成实例,模仿传统的继承方式,而后者的继承才是JavaScript语言本身提倡的继承方式。相比于类继承,原型继承具有节约内存,效率较高等特点,代码也更优雅。下面以具体的例子来简单说明下三种继承的不同。

比如目前有两个类,分别是

      function super(id){

            this.superId = id;

      }

      function sub(name){

            this.name = name;

      }

要让sub继承super,使用类继承可以这样实现

      function sub(id,name){

            super.call(this,id);

            this.name = name;

      }

这样的方式也可以实现多重继承,只要多加几条 call 或者 appley 语句即可。

使用这种方法的缺点是每次实例化一个对象都会为对象中的属性和方法创建新的副本,浪费内存,而且这样的继承无法用 instanceof 操作符来判断。

而原型继承则是

      sub.prototype = new super();

      sub.prototype.constructor = sub;

这是最简单最少语句的原型继承实现。已经可以实现我们要的效果,不过还可以继续改进。

在sub对象中,不变的属性和方法我们都可以放在其原型中比如:

      function super(){}

      super.prototype.superId = 100086;

然后我们可以让sub直接继承super的原型

      sub.prototype = super.prototype;

      sub.prototype.constructor = sub;

这样写的好处在于可以避免创建超类的新实例,因为它可能非常大或超类的构造函数有一些其他的副作用比如要进行一些复杂的运算,总之,可以减少这方面时间的花费,减少内存的占用,提高代码效率,当然也还有一些缺点,那就是现在的 sub.prototype 与 super.prototype 指向了同一个对象,那么对sub.prototype的任何修改都会反映到super.prototype上,如果此时还有其他的对象继承了super.prototype那么,就会直接影响到其他的对象,这不是我们所希望看到的。而且再看这句代码:

      sub.prototype.constructor = sub;

这句代码的本意是想修复sub.prototype的constructor属性,而现在将会连同super.prototype.constructor也一起修改了。

所以以上的原型继承还需要继续完善,看下面:

      var F = function(){};

      F.prototype = super.prototype;

      sub.prototype = new F();

      sub.prototype.constructor = sub;

这里借助了一个空对象作为中介,这样上面所提到的问题就解决了,改变sub.prototype只会修改F的实例,而不会影响到super.prototypel了,而且由于F是空对象,几乎不占内存。将上面的方法封装成一个函数

      function extend(sub, super) {
            var F = function(){};

            F.prototype = super.prototype;

            sub.prototype = new F();

            sub.prototype.constructor = sub;

            sub.super= super.prototype;

            if(super.prototype.constructor == Object.prototype.constructor){

                   super.prototype.constructor = super

            }

      }

上面的最终版本多出了额外的几行代码,它的作用是提供给sub一个super属性,来弱化子类与超类之间的耦合关系,并且确保超类的的prototype的constructor属性已经被正确设置,即使超类就是Object本身。这在既要调用超类的方法又想重写超类的某个方法时可以派上用场,可以直接通过super属性来访问。据说这个函数就是YUI库的继承方式。

除了上面两种继承方式外,还有一种方法——使用掺元类,通过对象扩充的方式让这些类包含的方法共享给其他类,直观点就是拷贝复制。

      function augment(reveivingClass, givingClass){

            for(methodName in givingClass.prototype){

                  if(!receivingClass.prototype[methodName]){

                        receivingClass.prototype[methodName] = givingClass.prototype[methodName];

                  }

            }

      }

上面就是一个简单的扩充方法。还可以改进一下,如果掺元类中包含许多方法,但我们只想要复制其中的一两个,那么上面这个函数还可以再添加一个参数表示要拷贝的方法数组

      function augment(reveivingClass, givingClass, copyArr){

            if(copyArr){

                 for(var i =  0; i < copyArr.length; i++){

                        var methodName = copyArr[i];

                        if(!receivingClass.prototype[methodName]){

                             receivingClass.prototype[methodName] = givingClass.prototype[methodName];

                        }

                 }

           }else{

                  for(var methodName in givingClass.prototype){

                        if(!receivingClass.prototype[methodName]){

                              receivingClass.prototype[methodName] = givingClass.prototype[methodName];

                       }

                  }

            }

      }

现在就可以使用 augment(sub, super, [‘trim’]) 这样的语句来达到只为sub类添加一个trim方法的目的了,如果想添加更多的方法,只要把方法方法名传入数组即可。

用这样的方法扩充一个类有时比继承另一个类更合适。

总结

这次主要学习了继承的几种不同实现方式,以及每种方法的优缺点,主要参考综合了阮一峰大神的关于JavaScript面向对象编程系列的博文以及JavaScript设计模式继承章节的内容。