日期:2014-05-16  浏览次数:20394 次

Javascript继承讨论(方法覆盖),以及如何对FireFox3.6.3的兼容(可能是FF3.6.3的BUG)
使用prototype.js(1.5.1)来实现 Javascript的类继承,而把浏览器升级到Firefox3.6.3,发现类的继承并不能在新版本FF(3.6.3)中实现
以下为使用Javascript的类继承的用法:
假设用JS来展现文件树形结构,
在js.widget这个名字空间下面

/*
展现文件系统的树
*/
js.widget.Tree = Class.create();
js.widget.Tree.prototype.initialize = function() {
  ..... 构造器,在此省略若干代码
}
js.widget.Tree.prototype.render = function() {
  ..... 渲染方法
}

/*
  具有排序功能的树,从js.widget.Tree中继承
*/
js.widget.SortableTree = Class.create();
/*
  使用prototype.js中的Object.extend进行类扩展
*/
Object.extend(js.widget.repository.SortableTree,
js.widget.repository.Tree);

/*
对于render方法进行覆盖,先调用父类的方法逻辑,然后加上子类的逻辑,使用句柄传递
先保存父类的方法
*/
js.widget.SortableTree.prototype._render = js.widget.Tree.prototype.render;
js.widget.SortableTree.prototype.render = function() {
   /*
     调用父类方法
   */
   this._render();
   .....省略若干代码
}

这样既可实现类的继承功能
问题是在FIREFOX3.6.3下面,会抛出exception,提示 “initialize”方法没有定义
在prototype.js里面可知,类的继承,仅仅只是属性赋值,即是:
Object.extend = function(destination, source) {

  for (var property in source) {
    destination[property] = source[property];
  }
  return destination;
}

遍历source的属性,然后赋值给destination,此方式在最新的firefox3.6.3下不可用,原因是因为
“prototype”属性在3.6.3下面,无法通过遍历获得(有关prototype属性的讨论请参见我另一篇文章)
要解决这个问题,则显式的指定prototype复制即可,代码如下:
Object.enhanceExtend = function(destination, source) {
    if(Prototype.Browser.IE) {
          for (var property in source) {
              destination[property] = source[property];
          }
/*
显式赋值
*/
          destination.prototype = source.prototype;
          return destination;
    } else {
          for (var property in source) {
                destination[property] = source[property];
/*
显式赋值
*/
                destination.prototype = source.prototype;
              }
          return destination;
    }

}
即可解决这个问题,希望所有在firefox3.6.3下遇到这个问题的朋友,都能解决这个问题