JavaScript的面向对象编程.doc

在写面向对象的WEB应用程序方面JavaSciprt是一种很好的选择.它能支持OOP.因为它通过原型支持继承的方式和通过属性和方法的方式一样好.很多开发者试图抛弃JS,试着用C#或JAVA仅是因为JS不是他认为合适的面向对象的语言.许多人还没有认识到javascript支持继承.当你写面向对象的代码时.它能给你很强大的能量.你也可以使用它写出可复用,可封装的代码.对象为何如此伟大? 面向对象思想的成功是由于它仿照了现实中的事物和事物的联系.事物有属性和方法.如果我们描述一个台灯.我们会说它的高度和宽度,比如12CM.开灯这个动作是它的方法.当它是处于开着的状态时.它可以被调亮一点或暗一点(也就是亮度这个属性值变大或变小).javascript 给予了为WEB应用程序创建对象的能力.对象在需要的时候相应的事件会被触发,代码封装后,它能被实例化很多次.用 new Object() 来创建对象在javascript里有几种创建对象的方法,在不同的场合可用不同的方法.最简单的就是用 new 操作符,例如:我们在这个例子里定义了person这个对象,然后加入了它的属性和方法.在这个例子里,自定义的方法里有两个属性.用文字记号Literal Notation创建对象用文字记号也可以创建对象,但要javascript 1.2以上版本.它的创建形式是多样的.文字记号可是是数组,也可以是任意的javascript表达式或值.用 new 操作符或文字记号创建一个自定义对象都是简单的,也是符合逻辑的.但它最大的缺点就是结果不可复用.也不能很容易的用不同的版本初始化创建对象.例如上面的第一个例子,如果 person 的 name 不是 Tim Scarfe,那样我们不得不重新定义整个对象,仅仅为了适应它的一点点改变.对象的构造和原型 在OOP的世界里,用先前的方法定义对象在许多场合都有限制.我们需要一种创建对象的方法,类型可以被多次使用而不用重新定义.对象在实例化时每次都可以按需分配不同的值.实现这个目标的标准方法是用对象构造器函数. 一个对象构造器只不过是个有规则的javascript函数,它就象一个容器(定义参数,调用其他函数等等).它们两者所不同的是构造器函数是由 new 操作符调用的.(你将在下面的例子中看到).基于函数语法形式的对象定义,我们可以使它工作得最好.让我们用现实世界中的猫来举个例子.猫的 name 和 color 是猫的属性.meeyow(猫叫)是它的一个方法.重要的是任何不同的猫都可能有不同的 name 和 meeyow 的叫声.为了建立适应这些特征的对象类,我们将使用对象构造器.在这里,函数 cat() 是一个对象构造器,它的属性和方法在函数体里用this来定义,用对象构造器定义的对象用 new 来实例化.主意我们如何非常容易的定义多个cat 的实例.每一个都有自己的名字,这就是对象构造器带给我们的灵活性.构造器建立了对象的蓝图.并不是对象本身.在原型里增加方法.在上面我们看到的例子里,对象的方法是在构造器里定义好的了.另外一种实现的途径是通过原型(prototype).xxx原型是javascript继承的一种形式.我们可以为对象定义好后,再创造一个方法.原来所有对象的实例都将共享.让我们来扩展最初的 cat 对象.增加一个改名的方法.用 prototype 的方式.就象你所看到的.我们仅只用了 关键字 prototype 实现了在对象定义后马上增加了changeName方法.这个方法被所有的实例共享.用原型(prototype) 重载 javascript 对象原型 在自定义对象和有选择性的重载对象上都可以工作.比如 Date() 或 String 这可能是无止境的.子类和超类在JAVA 和C+里,有关于类层次的外在概念.每一个类能有一个角色.In Java and C+, there is an explicit concept of the class hierarchy. i.e. Every class can have a super class from which it inherits properties and methods. Any class can be extended, or sub-classed so the resulting subclass can inherit its parents behavior. As we have seen, javascript supports prototype inheritance instead of class based. Its possible for inheritance to happen other ways, however.The following is an example of inheritance through functions.下面一个例子演示了如何继承通过function .基于继承的原型是遥远的.为 javascript 应用程序在许多场合.(基于原型的继承在许多javascript的应用场合是非常有用的.)对象作为联合数组正如你所知, (.)操作符能够用来存储. 操作符用来操作数组.How do I loop through properties in an object?You need to use a for/in loop.我们可以通过for in循环来遍历对象的属性。The important thing to notice is that in the object syntax the property is an identifier, whereas in the array syntax, its a string. The obvious benefits of using an array syntax to access an object is because of the literal data type, you can easily concat strings and play around with them to access an object. For this to work with the standard syntax, an eval() would need to be used.应该值得注意的是对象的属性只是一个标识字符，尽管在一个数组里是一个字符串，因为是一个literal的数据类型，所以有利于使用数组的方式的操作一个对象。你也可以很容易的存取一个对象在标准的语句中。这个时候eval()函数可能用得到。下面我们接着把原型继承法的也有缺点也讲一讲，希望大家能积极提意见并探讨其中的一些问题。原型(prototype)是JavaScript实现面向对象编程的一个基础，但它并不是唯一的构造类的方法，我们完全可以不使用prototype而实现类的编写(把属性和方法的附加全都写在构造函数里面就行了)。不过原型除了可以为Object的子类添加新的属性和方法外，它还可以为脚本环境中的内部对象继续添加原型属性和方法，比如我们最常用的给内部对象String添加一个Trim方法来删除字符串两端的空格，代码为： Stotype.Trim=function()returnthis.replace(/(s*)|(s*$)/g,);这样我们就可以在任何的String实例中使用Trim方法了，用惯了这种原型系统，有的时候反而还觉得传统OOP没有它爽，kaka。言归正传，继续讲我们的原型继承法。 原型继承法的原理：原型继承法的关键代码是其构造函数function ArrayList02()下的第一句： ArrayLtotype=newCollectionBase(); ArrayLtotype.constructor = ArrayList02;Ae 把prototype都覆盖成基类的一个实例了，子类还怎么使用prototype呢？这里不要着急，反正JavaScript的对象实例都是可以动态增删属性和方法的，基类实例作为prototype不就正好等于extends了CollectionBase吗？之后再使用XXX.prototype.xxx = function()，可以继续获得新增了属性和方法的对象。注意ArrayLtotype是在ArrayList02的构造函数外被初始化为基类的实例的。再来看第二句，为什么要把ArrayList02赋值给新prototype的constructor呢？如果不做这个赋值，当我们从ArrayList02的实例中，通过?.prototype.constructor去却其构造函数，将会获得CollectionBase。这不是我们的本意，而且这是使用instanceof关键之比较对象实例和对象也会出错。原型继承法的缺陷：原型继承法有两个缺陷，第一个是由于类的原型(prototype)实际上是一个Object的实例，它不能再次被实例化(它的初始化在脚本装载时已经执行完毕)。这么意思呢？我们知道在新建对象实例时，我们使用语句new ArrayList02()，这时我们可以看做JavaScript脚本引擎把prototype的一个浅拷贝作为this返回给类的实例(这里其实没有发生拷贝，只是利用浅拷贝这个概念来帮助理解)，如果类没有附加任何原型属性和原型方法，那么就等于返回了一个new Object()实例。问题就出在这里了，由于new对prototype执行的是浅拷贝，如果prototype的原型属性里有对象类型的属性，那么就会造成共享对象实例的问题(类似于在传统OOP的类定义中使用了static修饰符来修饰了属性)。这个缺陷下面会有示例演示，避免的办法就是不要在基类中定义对象类型的属性，比如: Array、Object和Date等。 第二个缺陷和上次讲的构造继承法的缺陷差不多，也是关于子类定义是语句顺序的。就是说代码：ArrayLtotype = new CollectionBase();必须在所有prototype定义之前执行，很简单，如果在原型属性和方法都导入完成后，再执行这个语句，就定于把之前的导入全都覆盖掉了:(。解决办法就是按我给文章(1)中的那个顺序来写，郁闷吧？kaka 原型继承法的示例：document.write(原形继承法:);vararrayList21=newArrayList02();arrayList21.Add(a);arrayList21.Add(b);arrayList21.foo();vararrayList22=newArrayList02();arrayList22.Add(a);arrayList22.Add(b);arrayList22.Add(c);arrayList22.foo(); 示例运行结果为： 原形继承法:classArrayList02:2:a,bclassArrayList02:3:a,b,c,a,b 发现问题了吧？实例arrayList22的foo()居然输出了a,b,c,a,b_. 这就是前面说的prototype对象浅拷贝带来的问题。不过为什么arrayList22中的集合计数器却仍然是3呢？这是因为this.m_Count是整数类型，这种类型又叫值类型(和C#里的值类型、对象类型概念一样的)。值类型不存在浅拷贝和深拷贝的问题，可以看成都是深拷贝。 小结：JavaScript的原型继承法，虽然有prototype浅拷贝那么严重的bug，不过它却是使用比较多的继承方式。因为我们很少在基类里定义属性，更别说对象类型的属性了，所以引发这个错误的可能性不是很大，只是它是个潜在的隐患:(。至于第二个缺陷，也是一个潜在bug，只要自己定义类的时候能比较清醒就不会犯错误。重载也比较简单，如果在ArrayLtotype = new CollectionBase();后有重名的属性或方法导入，自动覆盖基类中的属性或方法就像当于重载了。 应用场景：基类没有属性，至少是要没有对象类型的属性。这种继承的优点是保持了子类构造函数的完整，可以不在里面添加任何和继承有关系的代码，所有继承和重载操作都由对原型(prototype)的操作来完成。第一页：Javascript高级教程-第2日 今天我们将学习一项很有用而且很有趣的内容：cookies - 这 是用来记录访问过你的网页的人的信息。利用Cookies你能记录 访问者的姓名，并且在该访问者再次访问你的站点时向他发出 热情的欢迎信息。你还可以利用cookie记忆用户端的特点 - 如 果访问者的所接入的网线的速度慢，cookie可以自动告诉你在 给其发送网页的时候只发送尽可能少的图片内容。 只要你在合理的范围内使用cookies(不要用它探询用户的个人 隐私)，cookies还是相当实用得。所以我要向你们介绍cookies 的工作原理，但是在正式开始之前，我们先谈两个JavaScript 内容：有趣的字符串处理以及相关数组。第二页：神奇的字符串处理 为什么必须在开始cookies世界漫游之前必须先学习神奇的字符 串处理呢？因为cookies也是字符串。要保存访问者的信息，你 必须首先建立一个特殊的cookie字符串。然后在访问者又返回 你的站点时读取该信息，而此时你必须对该cookie字符串进行 解码。要生成和解释这些字符串你必须了解JavaScript的字符 串工作原理。所以我们必须先要了解字符串。如果你是一个新 手，你应该先阅读一下上次的javascript教程第2日的内容，一 下是一个例子： var normal_monkey = I am a monkey!; document.writeln(Normal monkey + normal_monkey); var bold_monkey = normal_monkey.bold(); document.writeln(Bold monkey + bold_monkey); 这里的声明： var bold_monkey = normal_monkey.bold(); 和下面对声明是等同的： var bold_monkey = + normal_monkey + ; 第1个版本的声明看起来要简明得多。这里用到了字符串对象中 的bold对象，其他的字符串对象还有indexOf, charAt, substring, 以及split, 这些方法可以深入字符串的组成结构。 首先我们研究一下indexOf。 indexOf indexOf用于发现一系列的字符在一个字符串中等位置并告诉你 子字符串的起始位置。如果一个字符串中部包含该子字符串则 indexOf返回returns -1. 这里是一个例子： var the_word = monkey; 让我们从单词 monkey开始。 var location_of_m = the_word.indexOf(m); location_of_m(字母m的位置)将为0，因为字母m位于该字符串 的起始位置。var location_of_o = the_word.indexOf(o); location_of_o(字母o的位置)将为1。 var location_of_key = the_word.indexOf(key); location_of_key(key的位置)将为3因为子字符串“key”以字母 k开始，而k在单词monkey中的位置是3。 var location_of_y = the_word.indexOf(y); location_of_y)字母y的位置)是5。 var cheeky = the_word.indexOf(q); cheeky值是-1，因为在单词“monkey”中没有字母q。 indexOf更实用之处: var the_email = prompt(Whats your email address?, ); var the_at_is_at = the_email.indexOf(); if (the_at_is_at = -1) alert(You loser, email addresses must have signs in them.); 这段代码询问用户的电子邮件地址，如果用户输入的电子邮件 地址中不包含字符 则 提示用户你输入的电子邮件地址 无效，电子邮件的地址必须包含字符。 charAt chatAt方法用于发现一个字符串中某个特定位置的字符。这里 是一个例子： var the_word = monkey; var the_first_letter = the_word.charAt(0); var the_second_letter = the_word.charAt(1); var the_last_letter = the_word.charAt(the_word.length-1); the_first_letter(第1个字符)是m the_second_letter(第2个字符)是o the_last_letter(最后一个字符)是 y 注意利用字符串的length(长度)属性你可以发现在包含多少个 字符。在本例中，the_word是monkey，所以the_word.length 是6。不要忘记在一个字符串中第1个字符的位置是0，所以最后 一个字符的位置就是length-1。所以在最后一行中用了 the_word.length-1。 第三页：子字符串 子字符串（substring）和charAt有些象，不同之处在于它能够 从一个单词中抓取整个的子字符串，而不只是字母，这里是其 格式： var the_substring = the_string.substring(from, to); From指的是子字符串中第个字母的位置，to有点奇特， 它是该子字符串中比最后一个位置大的位置使用这种神奇 的方法你可以标记子字符串的起始和结束位置，用to的位置 减去from的位置就会得出该子字符串的长度： var the_string = monkey; var clergy = the_string.substring(0,4); var tool = the_string.substring(3,6); 运行该段代码后变量clergy的值为monk; 变量tool的值为 key。 子字符串常和indexOf一起使用，将字符串分成若干块例如， 你可以从一个给定的URL中抽取出其域名： var the_url = prompt(Whats the URL?,); var lead_slashes = the_url.indexOf(/); var domain_start = lead_slashes + 2; var without_resource = the_url.substring(domain_start, the_url.length); var next_slash = without_resource.indexOf(/); var domain = without_resource.substring(0, next_slash); 这段代码的意思是：如果你输入 /javascript/index.html ，则域 名就是 如果这个方法对你来说有些麻 烦，我将向你介绍如何使用split方法简化其执行过程但是首 先我们作一些分析 基本的技巧是将第个斜杠和第个斜杠之间的内容分离出来： var the_url = prompt(Whats the URL?,); 这行代码向用户询问一个URL假设用户输入了 /javascript/index.html. var lead_slashes = the_url.indexOf(/); 这行代码确定第一个双斜杠的位置在本例中lead_slashes 的值是，因为双斜杠的位置从开始 你可能会想，通常德URL都是以http:/开始，所以双斜杠的位 置肯定是在开始，为什么还要加入indexOf这一段多余的代 码呢？但是问题的关键在于你不知道用户在填入URL时是否一定 填入http:，他们也许会不小心多键入了一个空格，也许他们所 键入的URL在一个加密服务器上，其URL是 / 在编程你必须预料到种种可能 发生的问题所以我们必须用indexOf方法确定双斜杠的确切的 起始位置 var domain_start = lead_slashes + 2; 这行代码用于计算该域名的第个字母的起始位置由于这里 有一个双斜杠，所以域名第个字母的起始位置应该在双斜杠 所在位置加的位置 var without_resource = the_url.substring(domain_start, the_string.length); 这段代码将域名起始位置往后的所有字符都提取出来所以执 行完这行代码后without_resource是 /javascript/index.html. var next_slash = without_resource.indexOf(/); 这行代码计算出该字符串中下一个斜杠的位置，而从该字符串 起始位置到这个斜杠之间的内容就是域名在本例中下一个斜 杠的位置是17。 var domain = without_resource.substring(0, next_slash); 最后一步是提取出该字符串起始位置到下一个斜杠之间的所有 内容在本例中使得域名等同于 。 这样做确实很麻烦，利用split方法则可以使该过程容易很多 第四页：分割方法(splitting method) 你可以使用split方法用限位器来分割一系列的名称，然后将其 放在一个数组中例如： var my_friends = trixie,moxie,sven,guido,hermes; var friend_array = my_friends.split(,); for (loop=0; loop friend_array.length; loop+) document.writeln(friend_arrayloop + is my friend.); 这段代码将字符串my_friends分割成包含个元素的数组 JavaScript可以为你自动建立一个数组，所以你无需使用 new Array() 将字符串分割成数组之后，我们使用了循环语句写出每一个 名称我们可以利用split方法简化前面所讲到的域名提取： var the_url = prompt(Whats the URL?,); var first_split = the_url.split(/); var without_resource = first_split1; var second_split = without_resource.split(/); var domain = second_split0; 这段代码简化了很多而且也更容易理解我们来分析一些这段 代码： var the_url = prompt(Whats the URL?,); 提示用户输入一个URL，假设用户输入 /javascript/index.html var first_split = the_url.split(/); 将用户输入的字符串分割成两块：first_split0是http:， first_split1是 /javascript/index.html. var without_resource = first_split1; 提取出数组中的第个元素，所以现在without_resource是 /javascript/index.html. var second_split = without_resource.split(/); 将without_resource分割成块：, javascript, 和index.html现在你可以看到split的用途了吧？ var domain = second_split0; 现在我们提取出新数组中的第个元素就可得出域名 接下来我们将学习相关数组的概念，然后我们就正式开始学习 神奇的cookie第五页：相关数组 数组可以使你存储各种元素的列表，而且使你能够访问图象、 表单以及表单元素在上次的Javascript教程中我讲解了如何 生成和控制按照索引号编排的数组例如： var an_array = new Array(hickory,dickory); var element_one = an_array0; var element_two = an_array1; an_array2 = doc; 这里生成一个新数组，并用两个字符串进行了初始化第个 元素可以用其索引号进行访问，而第个元素则可以用其索 引号进行访问an_array1你可以通过添加数组索引号加长 数组的长度在本例中我加入了第个元素，使其值等于 doc 现在该数组中包含hickory,dickory, doc个元素 相关数组和上面的数组相同，但它不使用数字做索引，而是用 单词来做索引 var phone_book = new Array(); phone_booksleepy = (203) 555-1234; phone_bookhappy = (203) 555-2345; 这段代码生成一个电话号码簿，你输入happy就可以访问相应 的电话号码： var happy_number = phone_bookhappy; 执行下一页的相关数字的例子看看它如何工作，同时再温习一 下javascript中表单的使用方法 第六页：相关数组的一个例子 电话号码本窗体顶端Name: Number: 窗体底端这个例子比较复杂，我们来慢慢研究它首先我们看一看电话号码簿本身它在文件头中定义为phone_book，有条输入项： var phone_book = newArray();phone_bookhappy = (203) 555-1234;phone_booksleepy =(203) 555-2345;phone_booksneezy = (203)555-4321;phone_booksleazy = (203) 555-3245;phone_booksneery= (203) 555-3213;phone_bookbleary = (203)555-2365;phone_booktweaked = (203)555-1664;每条记录的关键字是小矮人的名字，而每条记录的值就是该小矮人的电话号码假设我们需要找到某个小矮人的电话号码，例如Sneezy的电话号码，我们这样写： var the_number = phone_booksneezy;现在我们看看这个表单： Name:HappySleepySneezySleazySneeryBlearyTweakedNumber:注意表单和表单内的元素都有名称，这样以来便于我们读取和写入表单元素注意select标签中的onChange处理器的用法：当所选择的选项变化时，它就调用函数displayNumber，该函数在文件头中已做了定义如果我在下拉选单中选择了sneezy，则表达式this.options selectedIndex.value 返回sneezy，如果你对该部分的内容不熟悉，请先阅读上次的javascript教程第5日的内容确定了用户所选择的选项之后，我们进入函数displayNumber： functiondisplayNumber(phone_book, entry)var the_number = phone_bookentry;window.document.the_form.number_box.value =the_number;它使用了两个参数一个电话号码簿和一个名称，在函数第1行中， var the_number =phone_bookentry;观察一下电话号码簿上的名字，然后进入下一行， window.document.the_form.number_box.value= the_number;填入表单元素的数字命名为number_box你可以看到相关数组是将一个字符串连接到另一个字符串的好办法你可以利用相关数组将名字连接到电话号码，密码，生日以及其他各种资料在之后的课程中我将向你们介绍利用相关数组可以做的各种有用的技巧第七页：介绍cookie 现在你已经掌握了先进的字符串处理和相关数组概念，该是我 们打开神奇的cookie魔瓶的时候了cookie是记录访问你的站 点的人的信息，它其实驻留在用户的硬盘上，即使用户已经离 开你的站点，cookie在用户的硬盘上仍然存在，如果该用户再 次返回你的站点，则该cookie就会被一起发回到你的服务器中， 便于你统计和处理重复到访者的信息 但是有一点需要注意：Cookies被引入Netscape 2.0和MSIE 3.0， 但是MSIE 3.0对cookies的应用不是太完善你可以利用cookies 在别的用户的计算机上保存和读取信息，但却不能将cookie保 存在自己的计算机上，所以给cookie的测试造成一定的困难 所以如果你使用的是MSIE 3.0，你最好将其升级为MSIE 4.0或 者改用Netscape 下面我们看一看一个cookie应用的 典型例子 ，我们在一个网页 中设置cookie，然后通过别的网页读取它在使用该例子的 时候，想想如果没有cookie，你如何做到这一点第十页：复杂的cookies读取 如果你想让你的cookie包含更多的信息，你可以将cookie的值 设得很长假设我们要保存某人的姓名，年龄和电话号码： var the_cookie = username:thau/age:older than the hills/phone:411; document.cookie=my_happy_cookie= + escape(the_cookie); 我用斜杠来分割属性名称，用分号区别不同的属性名称及其 属性值斜杠和分号是不是绝对的选择，你可以使用任何的 字符做分割的标志： var the_cookie = username=thau&age=older than the hills&phone= 411; document.cookie=my_happy_cookie= + escape(the_cookie); 你可以自行选择限位器只要你注意在对cookie解码时也使用 同样的限位器即可 设置复杂的cookie时方法要复杂一些我们建议你使用相关数 组来保存所有的信息，假设我们将该cookie保存到某人的硬 盘上： my_happy_cookie=username:thau/age:older than the hills/phone:411 你可以将这些信息放到一个方便的相关数组中： function readTheCookie(the_info) / load the cookie into a variable and unescape it var the_cookie = document.cookie; var the_cookie = unescape(the_cookie); / separate the values from the cookie name var broken_coo