21世纪高等学校计算机规划教材之第3章JavaScript面向对象编程课件

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