《21世纪高等学校计算机规划教材之第3章JavaScript面向对象编程课件》由会员分享,可在线阅读,更多相关《21世纪高等学校计算机规划教材之第3章JavaScript面向对象编程课件(32页珍藏版)》请在金锄头文库上搜索。
1、第3章 JavaScrip面向对象编程,JavaScript是一门基于对象的语言,实际上JavaScript中的一切都是对象。,3.1 JavaScript语言特性,函数是在JavaScript中实现面向对象编程的基础,此外apply、call等JavaScript语言特性也在JavaScript面向对象编程中起到了重要作用。 另外,闭包(也称匿名函数)的概念在JavaScript面向对象编程中得到了广泛的应用,它也是理解各类JavaScript开发框架实现原理的基础。,3.1.1 JavaScript中的函数,1arguments、callee和caller属性 在函数调用过程中,我们可以通
2、过arguments属性访问函数的输入参数,arguments参数是由脚本解释器自动创建的,不能手工创建或者修改。 arguments属性可以看作是一个Array对象,它具有length属性,可以通过序号访问每一个参数。,但是它并不是真正的Array对象,它不具备Array对象的join、shift等方法,而且它还具有自己独有的属性callee。 通过callee属性可以获取对正在执行的函数对象的引用。 例3-1是arguments和callee属性的应用示例。,【例3-1】 arguments和callee属性的应用 【例3-2】 callee和caller属性的应用,2函数对象的多重身份,
3、函数对象是JavaScript中一个很特殊的对象,其特殊性体现在它的多重身份上,请看例3-3的代码。 【例3-3】 Function对象应用示例,function关键字可以声明普通的函数,这一点和其他语言中函数的概念是相同的。 除此以外,它还可以用于类的声明和实现、对象的构造函数以及类引用。 例3-3中通过function关键字声明了Flower类,并且通过this关键字声明了两个属性name和color;然后在创建obj对象时,Flower ()又起到了对象构造函数的作用;最后的代码中使用instanceof关键字判断obj对象是否是Flower类的实例,此时Flower又起到了类引用的作用
4、。,3.1.2 apply和call方法,apply方法和call方法都可以将函数绑定到其他对象上执行,区别在于调用参数形式的不同,apply方法通过数组形式传入函数的调用参数,而call方法使用逗号分隔的参数列表。 调用apply方法和call方法的语法如下所示: apply(thisObj,argArray) call(thisObj,arg1,arg2,.argN) 例3-4说明了两者的区别。 【例3-4】 apply和call方法示例,3.1.3 this关键字,在JavaScript的对象系统中,this关键字常用于两种地方: (1)在构造器函数中,指代新创建的对象实例; (2)在对
5、象的方法被调用时,指代调用该方法的对象实例。,如果一个函数被当作普通函数(而不是对象方法)调用,那么在函数中的this关键字将指向window对象。 当然如果this关键字不在任何函数中,那么它也指向Global对象。,3.1.4 使用for ( in ),for ( in )语句可以遍历对象的所有属性和方法,例3-5所示的代码就遍历了Car对象的属性和方法,如果是属性则输出属性值,如果是方法则执行方法。 【例3-5】 for ( in )示例,3.1.5 闭包,所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。 关于闭包,
6、最简单的描述就是 ECMAScript 允许使用内部函数,即函数定义和函数表达式位于另一个函数的函数体内。 而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。,例3-6所示是一个使用闭包的示例。 【例3-6】 闭包示例,3.2 JavaScript面向对象编程实现,面向对象编程的基本要素是封装、继承和多态,下面介绍在JavaScript中实现这些特性的方法。,3.2.1 类的声明,在JavaScript中可以使用如下的方式进行类的声明。 function ClassA() this.p1 = p1; this.p2 = p2; this.f1 = fu
7、nction() alert(f1); this.f2 = function() alert(f2); ,1私有成员变量,类中除了公有成员以外可能还会有一些私有成员变量,JavaScript可以通过声明局部变量的方式定义私有成员变量。,2静态成员,在JavaScript中可以通过下面的方式声明静态属性和静态方法。 ClassA.staticProp = 静态成员变量; ClassA.staticMethod = function() alert(ClassA.staticProp); ,3实例成员,如果要声明一个类的实例属性或者方法,可以使用JavaScript中对象的prototype属性。
8、,4基于prototype的类声明,利用prototype属性还可以实现另外一种类的声明方式,例3-7就是基于prototype方式的类声明示例。 【例3-7】 基于prototype方式的类声明,3.2.2 继承,JavaScript语言本身并没有提供对于继承的语法支持,但是仍然可以采用复制属性和对象的方式来实现继承。 以例3-7中声明的ClassA类为例,如果想要创建一个继承于该类的子类SubClassA,并且在SubClassA类中声明一个新方法newMethod,最直接的方法就是通过如下的方式实现。,function SubClassA() SubClassA.prototype =
9、p1 : p1, p2 : p2, f1 : function() alert(f1); , f2 : function() alert(this.p2); , newMethod : function() alert(newMethod); ,【例3-8】 JavaScript中继承的实现,3.2.3 多态,在JavaScript中,多态的实现可以采用和继承类似的方法。 首先定义一个抽象类,其中调用一些虚方法,虚方法在抽象类中没有定义,而是通过其具体的实现类来实现的。 例3-9是使用JavaScript实现多态的例子。 【例3-9】 JavaScript中多态的实现,3.3 JavaScri
10、pt与设计模式,目前富客户端的Web应用开发已经成为趋势,JavaScript在Web应用中所占的比例会越来越大,如何有效地实现代码的复用以及应对需求的变化成为JavaScript编程中必须考虑的问题。 在面向对象编程语言中,我们可以通过合理应用设计模式实现代码复用。 在JavaScript中,这些设计模式同样适用,本节将通过一些示例来说明设计模式在JavaScript编程中的应用。,3.3.1 Singleton模式,通常使用全局变量不是一个很好的选择,而Singleton模式可以作为全局变量的替代方案。 Singleton模式可以保证一个类仅有一个实例,并且提供一个访问它的全局访问点。 在
11、JavaScript中可以通过如例3-10所示的方式实现Singleton模式。 【例3-10】 Singleton模式,3.3.2 Factory Method模式,使用Factory Method模式的目的是为了定义一个创建对象的接口,由子类来决定实例化哪一个类。 在某些情况下,我们无法确定将要创建的对象是哪个类的实例,例如创建XMLHttpRequest对象,不同的浏览器使用了不同的技术实现XMLHttpRequest对象。 通过Factory Method模式则可以实现创建XMLHttpRequest对象的通用方法。代码如例3-11所示。 【例3-11】 Factory Method模
12、式,3.3.3 Facade模式,很多情况下,一个应用系统会划分为若干个子系统,子系统往往因为不断演化而越来越复杂,会给使用子系统的用户带来一些困难。 Faade模式可以为子系统提供一个简单的接口和一致的界面,使得相应的子系统更加容易使用。,Facade模式在Web开发中的一个典型应用是实现统一的API接口,消除各种浏览器在具体特性实现中的差异。 下面通过一个简单的示例说明Faade模式的应用,该示例的目标是向用户输出一行欢迎信息,提示用户使用的浏览器类型。 为了简单起见,示例中仅区分IE和其他浏览器。相关的代码如例3-12所示。 【例3-12】 Facade模式,小 结,本章对JavaScr
13、ipt面向对象编程的相关知识进行了介绍,JavaScript中的函数、闭包等特性是实现面向对象编程的基础,在JavaScript中我们可以实现类的声明、继承和多态等面向对象编程的基本特性,还可以在JavaScript编程中应用各种设计模式实现代码的重用。,本章的主要内容是JavaScript的面向对象编程。 3.1节对JavaScript语言的面向对象特性进行了讲解,特别是函数、apply、call方法和for in循环,它们是在JavaScript中实现面向对象编程的基础。 3.2节介绍了如何在JavaScript中实现类的声明、继承和多态,3.3节从设计模式的角度出发,通过多个示例说明如何编写可重用的JavaScript代码。,