javascript面向对象编程（四）

Published by canque on February 27, 2008 04:42 pm under [web发展] Tags: javascript, 面向对象编程

继承是面向对象语言中的一个重要概念，现在我们来探讨一下继承。在网上搜一下javascript继承，可以得到无数关于javascript继承的文章。这些文章可能使用了很多让人眼花缭乱的技巧。但是，大多数情况下，其核心思想只有两种：利用prototype来实现继承（prototype继承）和利用复制对象方法来实现继承（class继承？听过的说法，不知是否准确）。先了解下这两种继承是如何实现的，以及它们的区别。

[prototype继承]

PLAIN TEXT

JavaScript:

1. <script language= "JavaScript">
2.          var base = function ( ) {
3.          this. info = 'I am the base class';
4.          this. getInfo = function ( ) {
5.              return this. info;
6.          }
7.     }
8.     var newClass = function ( ) {
9.          this. info = "I am the new class";
10.     }
11.     newClass. prototype = new base ( );
12.     var obj = new newClass ( );
13.     alert (obj. getInfo ( ) );
14. </script>

对prototype基本原理还不清楚的人可以看看这篇文章，虽然是说actionscript，但原理都是一样的。

[复制对象继承]

PLAIN TEXT

JavaScript:

1. <script language= "JavaScript">
2.          var base = function ( ) {
3.          this. info = 'I am the base class';
4.          this. getInfo = function ( ) {
5.              return this. info;
6.          }
7.     }
8.     var newClass = function ( ) {
9.          this. info = 'I am the new class';
10.     }
11.     var temp = new base ( );
12.     for ( var prop in temp ) {
13.         newClass. prototype [prop ] = temp [prop ];
14.     }
15.     var obj = new newClass ( );
16.     alert (obj. getInfo ( ) );
17. </script>

通过复制temp(对象,newClass的实例)到newClass(新建立的类)上来实现继承。

[prototype继承和复制对象继承区别]
从上面的例子可以看出，这两种方法都实现了继承。但是，它们究竟有什么区别呢？

prototype继承方式：
newClass.prototype->base.prototype->Object.prototype

复制对象继承方式：
base.prototype->Object.prototype
|
| [对象复制]
|
V
newClass.prototype->Object.prototype

下面的代码是prototype继承方式，我们尝试对基类进行修改：

PLAIN TEXT

JavaScript:

1. <script language= "JavaScript">
2. //定义base基类
3.     var base = function ( ) {
4.          this. info = "I am the base class";
5.     }
6.     base. prototype. getInfo = function ( ) {
7.          return this. info;
8.     }
9.     //定义基于base的新类newClass
10.     var newClass = function ( ) {
11.          this. info = 'I am the new class';
12.     }
13.     newClass. prototype = new base ( );
14.     //实例化
15.     var baseObj = new base ( );
16.     var newObj = new newClass ( );
17.     alert (baseObj. getInfo ( ) ); //I am the base class
18.     alert (newObj. getInfo ( ) ); //I am the new class
19.     //修改基类方法getInfo
20.     base. prototype. getInfo = function ( ) {
21.          return "Update! " + this. info;
22.     }
23.     alert (baseObj. getInfo ( ) ); //Update! I am the base class
24.     alert (newObj. getInfo ( ) ); //Update! I am the new class
25. </script>

由上面的代码可以看出，由于prototype继承是通过prototype链的指向来完成的，所以改变prototype链上级将实时影响到prototype链的下级。而如果是复制对象的继承方式，由于是将基类复制到新类，所以再改变基类对新类不会有影响。看下面的代码：

PLAIN TEXT

JavaScript:

1. <script language= "JavaScript">
2.     //定义base基类
3.     var base = function ( ) {
4.          this. info = "I am the base class";
5.     }
6.     base. prototype. getInfo = function ( ) {
7.          return this. info;
8.     }
9.     //定义基于base的新类newClass
10.     var newClass = function ( ) {
11.          this. info = 'I am the new class';
12.     }
13.     //复制方法
14.     newClass. prototype. getInfo = new base ( ). getInfo;
15.     //实例化
16.     var baseObj = new base ( );
17.     var newObj = new newClass ( );
18.     alert (baseObj. getInfo ( ) ); //I am the base class
19.     alert (newObj. getInfo ( ) ); //I am the new class
20.     //修改基类方法getInfo
21.     base. prototype. getInfo = function ( ) {
22.          return "Update! " + this. info;
23.     }
24.     alert (baseObj. getInfo ( ) ); //Update! I am the base class
25.     alert (newObj. getInfo ( ) ); //Update! I am the new class
26. </script>

关于prototype这个东西，到现在我还没见过有谁敢拍胸脯说自己完全掌握的。本文也没有涉及到prototype比较深刻的地方。借此文抛砖引玉，希望更多的朋友能参与交流，不吝赐教。