在JavaScript面向对象编程中使用重载

简介:
 在此之前,我写了一个' 在JavaScript面向对象编程中使用继承'的一系列文章。有很多的热心网友参与了讨论,指出了其中很多的问题并给予了我很多的好建议,非常感谢他们。同时在OOP中和继承关系非常紧密的就是 重载这个东西,那么我介绍的继承方法支持重载吗?

    这里我要说的重载(override),确实就是传统OO中的重载,而不是我们在JavaScript对象中对其同名属性或方法的重写(rewrite)。在此我就不详细讲什么是OOP中的override了,因为只要是使用.NET来编程的程序员都应该很了解的。

    在我们的 附加继承法的核心代码中:
None.gif   for (  var key  in base )
None.gif  {
None.gif       if ( ! this[key] )
None.gif      {
None.gif           this[key] = base[key];
None.gif           if (  typeof(base[key]) != ' function' )
None.gif          {
None.gif               delete base[key];
None.gif          }
None.gif      }
None.gif  }
None.gif   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后调用基类方法非常的相似了 emsmilep.gif,我们就这么来调用基类方法可以吗?当然是不可以的,因为这时的方法都属于基类对象base,它是无法访问子类中的属性的。不过幸好JScript提供两个函数,call和apply,于是我们可以使用这样两个方法来重新应用 this(子类实例)对象。调用语句如下:
None.gif   this.base.MethodName.call( this);
None.gif   this.base.MethodName.apply( this, arguments);
    第一个语句用来处理没有参数的override的情况,第二个用来处理调用子类方法有参数,而其参数还需要原样传入基类方法的情况。这样的override语句虽然算不时上sexy,不过他的好处是对基类方法的编写没有任何的要求,而且即使错误的使用了 this.base.MethodName()还是比较容易debug出错误来的。

    这个override最大问题是什么呢?就是它只能支持对子类中,没有使用同样override方法的方法进行这种override。好绕口,看看下面这个实例就知道问题了:
None.gif < html >
None.gif < head >
None.gif     < title >Researh Override in JavaScript OOP </ title >
None.gif     < meta  name ="author"  content ="birdshome@博客园"   />
None.gif     </ head >
None.gif < body >
ContractedBlock.gif     < script  language ="javascript" > dot.gif </ script >
ContractedBlock.gif     < script  language ="javascript" > dot.gif </ script >
None.gif </ body >
None.gif </ html >
None.gif
    // 运行示例代码需要' 附加继承法 '中那个Extends方法的支持

    三个类grandpa、father和son,它们分别具有两个属性和两个方法。其中的getName方法,是从father中调用了grandpa中被override的同名方法,然后又从son中的getName调用了father中被override的同名方法。这样就在执行son中的getName时,在father中的getName方法中产生死循环,最后stack overflow,IE crash emsad.gif。而其中的getFamilyName方法,是从son中调用grandpa中被override的同名方法,而grandpa中的getFamilyName没有再调用任何override方法,所以可以正确的运行。

    由于JavaScript的OOP始终是在做一些模拟的工作,除了能实现某些模拟出来的功能外,同时实现模拟的代码的复杂度也是应该考虑的,像这样的override从代码实现上看非常的轻量级,而且也是很容易理解的。同时可以满足绝大多数的JS控件的开发,随后我会再给出一个ListView控件的事例,它的实现完全基于'附加继承法'和我这篇文章中所讲到的'重载'技术。

    非常欢迎您的宝贵意见和建议,让我们开发的更好(copy了dudu的语录:)。

    Attention:运行代码alert(s.getName())一定要关闭其它的IE,或避免正在任何IE中填写表单。


本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。

目录
相关文章
|
1月前
|
存储 前端开发 JavaScript
揭秘原型链:探索 JavaScript 面向对象编程的核心(下)
揭秘原型链:探索 JavaScript 面向对象编程的核心(下)
揭秘原型链:探索 JavaScript 面向对象编程的核心(下)
|
1月前
|
前端开发 JavaScript 开发者
揭秘原型链:探索 JavaScript 面向对象编程的核心(上)
揭秘原型链:探索 JavaScript 面向对象编程的核心(上)
揭秘原型链:探索 JavaScript 面向对象编程的核心(上)
|
1月前
|
存储 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(三)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
1月前
|
设计模式 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(一)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
1月前
|
存储 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(二)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
4天前
|
JavaScript 前端开发
深入解析JavaScript中的面向对象编程,包括对象的基本概念、创建对象的方法、继承机制以及面向对象编程的优势
【6月更文挑战第12天】本文探讨JavaScript中的面向对象编程,解释了对象的基本概念,如属性和方法,以及基于原型的结构。介绍了创建对象的四种方法:字面量、构造函数、Object.create()和ES6的class关键字。还阐述了继承机制,包括原型链和ES6的class继承,并强调了面向对象编程的代码复用和模块化优势。
11 0
|
4天前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
21 2
|
1月前
|
JavaScript 前端开发
【JavaScript技术专栏】JavaScript中的面向对象编程
【4月更文挑战第30天】本文介绍了JavaScript中的面向对象编程,包括对象的基本概念、创建对象的方法(字面量、构造函数、Object.create()和ES6的class)及继承机制(原型链和ES6的class继承)。面向对象编程通过抽象为对象,实现了代码复用和模块化,提高了程序的可读性和可维护性。
|
1月前
|
前端开发 JavaScript
前端深入理解JavaScript面向对象编程与Class
随着JavaScript的发展,ECMAScript 6(ES6)引入了许多新的语言特性和语法糖,其中包括了面向对象编程的Class(类)机制。Class提供了一种更简洁、更直观的方式来定义对象和操作对象的行为。本文将介绍ES6中Class的概念、语法和特性,并通过示例代码来说明其实际应用。
|
10月前
|
JavaScript
【JS面向对象编程常用方法】
【JS面向对象编程常用方法】
36 0