在JavaScript面向对象编程中使用重载_javascript 对象赋值重载-优快云博客

本文探讨了在JavaScript面向对象编程中实现重载的方法，并通过具体示例解释如何避免无限递归的问题，同时还提供了改进后的调用基类方法的解决方案。

在此之前，我写了一个'在JavaScript面向对象编程中使用继承'的一系列文章。有很多的热心网友参与了讨论，指出了其中很多的问题并给予了我很多的好建议，非常感谢他们。同时在OOP中和继承关系非常紧密的就是重载这个东西，那么我介绍的继承方法支持重载吗？
这里我要说的重载(override)，确实就是传统OO中的重载，而不是我们在JavaScript对象中对其同名属性或方法的重写(rewrite)。在此我就不详细讲什么是OOP中的override了，因为只要是使用.NET来编程的程序员都应该很了解的。
在我们的附加继承法的核心代码中：

 for ( var key in base )
  {
      if ( !this[key] )
      {
          this[key] = base[key];
          if ( typeof(base[key]) != 'function' )
          {
              delete base[key];
          }
      }
  }
  this.base = base;

delete base[key]的作用是删除掉基类对象实例中的属性，因为它们都已经被shallow copy到子类实例中了。而this.base = base;的作用是保留了基类对象实例，实际上就是保留了基类中的所有方法，这些保留下来的方法同时也是shallow copy到子类中了的。只是我们在子类中可以方便的将其rewrite，注意这里不是override，而一定是rewrite。rewrite后其实子类实例中就没有了基类中copy过来的同名方法了。
不过由于我们保留了对基类实例的引用this.base = base;，所以即使在子类中被rewrite的方法，基类中仍然可以使用this.base.MethodName()来访问。这个调用基类方法的语句已经和C#中的override后调用基类方法非常的相似了，我们就这么来调用基类方法可以吗？当然是不可以的，因为这时的方法都属于基类对象base，它是无法访问子类中的属性的。不过幸好JScript提供两个函数，call和apply，于是我们可以使用这样两个方法来重新应用this(子类实例)对象。调用语句如下：

 this.base.MethodName.call(this);
  this.base.MethodName.apply(this, arguments);

第一个语句用来处理没有参数的override的情况，第二个用来处理调用子类方法有参数，而其参数还需要原样传入基类方法的情况。这样的override语句虽然算不时上sexy，不过他的好处是对基类方法的编写没有任何的要求，而且即使错误的使用了this.base.MethodName()还是比较容易debug出错误来的。
这个override最大问题是什么呢？就是它只能支持对子类中，没有使用同样override方法的方法进行这种override。好绕口，看看下面这个实例就知道问题了：

<html>
<head>
    <title>Researh Override in JavaScript OOP</title>
    <meta name="author" content="birdshome@博客园" />
    </head>
<body>
    <script language="javascript">
    function grandpa(name, familyName)
    {
         this.name = name;
         this.familyName = familyName; 
    }

    grandpa.prototype.getName = function()
    {
         return "grandpa's name: " + this.name;
    };
   
    grandpa.prototype.getFamilyName = function()
    {
         return "grandpa's family name: " + this.familyName;
    };  

    function father(name, familyName)
    {
         this.Extends(grandpa);
         this.name = name;
         this.familyName = familyName; 
    }

    father.prototype.getName = function()
    {
         return this.base.getName.call(this) + "\r\nfather's name: " + this.name;
    };

    function son(name, familyName)
    {
         this.Extends(father);
         this.familyName = familyName; 
         this.name;
    }

    son.prototype.getName = function()
    {
         return this.base.getName.call(this) + "\r\nson's name: " + this.name;
    };
   
    son.prototype.getFamilyName = function()
    {
         return this.base.getFamilyName.call(this) + "\r\nson's family name: " + this.familyName;
    };
    </script>
    <script language="javascript">
    var g = new grandpa('Michael', 'William');
    alert(g.getName()); 
    var f = new father('John', 'William');
    alert(f.getName()); 
    var s = new son('Tom', 'William');
    // alert(s.getName()); 
    alert(s.getFamilyName()); 
    </script>
</body>
</html>

// 运行示例代码需要'附加继承法'中那个Extends方法的支持

     三个类grandpa、father和son，它们分别具有两个属性和两个方法。其中的getName方法，是从father中调用了grandpa中被override的同名方法，然后又从son中的getName调用了father中被override的同名方法。这样就在执行son中的getName时，在father中的getName方法中产生死循环，最后stack overflow，IE crash。而其中的getFamilyName方法，是从son中调用grandpa中被override的同名方法，而grandpa中的getFamilyName没有再调用任何override方法，所以可以正确的运行。
    由于JavaScript的OOP始终是在做一些模拟的工作，除了能实现某些模拟出来的功能外，同时实现模拟的代码的复杂度也是应该考虑的，像这样的override从代码实现上看非常的轻量级，而且也是很容易理解的。同时可以满足绝大多数的JS控件的开发，随后我会再给出一个ListView控件的事例，它的实现完全基于'附加继承法'和我这篇文章中所讲到的'重载'技术。
上周在关于JavaScript面向对象编程的话题中，我讲过怎么'在JavaScript面向对象编程中使用重载'。虽然那个方法需要使用一个call函数来调用基类被重载的方法，看起来比较怪不说。不过更大的问题却是那个方法只支持两级继承的基类方法调用，使用起来真是如食鸡肋。
    后来仔细研究了一下call函数的执行过程和原理，发现要实现"重载"一文中的任意级别类调用其直接基类方法是可以实现的。还记得上次那个示例吗？三个类：grandpa、father & son。father继承于grandpa，son继承与father，它们都有一个叫getName()的方法。father中的getName()中使用this.base.getName.call(this);没有问题，而不能再在son的getName()中使用this.base.getName.call(this)，因为son的基类father的getName()方法中已经有了基类调用。
    在上次的示例中，son如果执意要调用getName()。执行的结果我说过的，将会是无限递归，最后IE脚本解析器的函数堆栈overflow，甚至IE也一块儿crash掉。问题出在调用son中的getName()方法中的this.base.getName.call(this)后，this(call的参数)被置换到father对象的实例中去了，这时执行getName()时，除了函数是由father类提供的外，此时的this就是son的那个实例。在这个时候再调用father中getName()，getName中的this.base.getName.call(this)其实是this(son的实例).base.getName.call(this(son的实例))，看出问题了吧？无限递归就在这里开始了，因为永远都只能在father(这时的实例this其实是son的)的getName()方法中调用"this(son的实例).base.getName.call(this(son的实例))"。
    现在问题清楚地摆在眼前了，并且也知道是怎么产生的了，接下来的任务就是解决掉它！
    解决问题的关键就点是：因为永远都只能在father(这时的实例this其实是son的)的getName()方法中调用"this(son的实例).base.getName.call(this(son的实例))"。如果我们知道这时我们其实不是在son的实例中，而是在father的实例中，执行的是：this(father的实例).base.getName.call(this(son的实例))"。这就对了。
    那么我们有办法知道这第一个this不是son的而应该是father的吗？好像很难，因为this确确实实就是son的嘛。不能再从this本身去打主意了，那么我们怎么办？不是还有一个getName()方法吗？它可是来自father的实例的噢！因为call(this)只是置换了该方法中本身的this(father的实例)，所以我们可以通过查找函数的方式来确定当前方法的本身实例(被call方法替换之前的)是谁。
    为此我重写了call函数，名叫Call。调用界面和call相同，功能也相同(内部就是用的call，毕竟我这里不是在模拟call)。还差点忘了，除非我特殊说明，我在JavaScript面向对象编程中的继承，默认都是使用的"附加继承法"。Call函数源代码如下：（参考：在JavaScript面向对象编程中使用重载）

 /*********************************************************** 
 CommonLab JScript Code Library 
 
 Author: lizhi[at]hit.edu.cn[http://www.cnblogs.com/birdshome/] 
 Company: http://www.u-soft.com.cn/ 
 Copyright: U-Soft Co., Ltd. © All rights reserved. 
 
 Version: 1.2 
 Created: 2004.11.30 22:27 
 Updated: 2005.03.25 14:17 
 
 History: 
     8. Attach 'Call' method to Function. [2005.02.23] 
 
 Announce: You may use the code freely if this comment reserved. 
     
 **********************************************************/ 
   Function.prototype.Call = function(that) 
{ 
    if ( arguments.length < 1 ) 
    { 
        throw new Error('The first parameter must be swapped object.'); 
    } 
    var thatBase = that; 
    do 
    { 
        for ( var key in thatBase ) 
        { 
            if ( thatBase[key] == arguments.callee.caller ) 
            { 
                var target = thatBase; 
                while(target[key] == target.base[key]) 
                { 
                    target = target.base; 
                } 
                if ( arguments.length == 1 ) 
                { 
                    return target.base[key].call(that); 
                } 
                else 
                { 
                    var args = []; 
                    for ( var i=1 ; i < arguments.length ; ++i ) 
                    { 
                        args.push(arguments[i]); 
                    } 
                    return target.base[key].apply(that, args); 
                } 
            } 
        } 
    } 
    while ( thatBase = thatBase.base ) 
};

把"重载"一文中的那三个类中的call全改为Call(调用参数不变)，运行如下示例代码：

   <script language="javascript">
    var g = new grandpa('Michael', 'William');
    alert(g.getName()); 
    var f = new father('John', 'William');
    alert(f.getName());
    var s = new son('Tom', 'William');
    alert(s.getName());
    // alert(s.getFamilyName()); 
    </script>

运行结果为：
No.1 alert:

grandpa's name: Michael

No.2 alert:

grandpa's name: John
 father's name: John

No.3 alert:

 grandpa's name: Tom
 father's name: Tom
 son's name: Tom