JavaScript面向对象程序设计

JavaScript面向对象程序设计前言基于对象还是面向对象？面向对象技术是现代软件开发中的重要技术之一。面向对象变成的好处毋庸置疑，现在的主流语言如Java、C++都是面向对象的。现在的面向对象理论更多的是使用Java或C++进行描述，究其根源，在于这些语言都是传统的面向对象语言，具有面向对象理论所指明的一切特性：类、封装、继承、多态等等。相比而言，一些动态语言如JavaSript就显得不那么面向对象——至少，在JavaScript中并没有类class这一关键字。但是，在JavaScript中并不是没有类的概念。于是有人说，JavaScript是基于对象的语言，而不是面向对象的语言。面向对象的语言具有三个特性：封装、继承和多态，三者缺一不可；基于对象的语言通常仅仅是使用对象，其实现的是封装，并没有提供后两种特性。的确，从语法上来说，JavaScript并没有特定的语法或者在语言级别上来实现继承和多态。但是，这并不妨碍我们使用这些特性。这是因为，JavaScript是一种灵活的语言，它是相当的灵活，以至于这些并没有提供的东西，更确切的说，是没有明确的表明的东西，都是可以实现和使用的！那么，你还能说JavaScript是基于对象而不是面向对象的吗？面向对象也是一种思想，任何语言，包括C语言，同样可以使用面向对象的思想去解决现实生活中的各种问题。到底是基于对象还是面向对象，这些概念让计算机哲学家门去争论吧——相信他们的争论最终也会和先有鸡还是先有蛋的问题一样的结果——我们所要做的，是要使用这种语言提供的机制去解决我们的问题。为什么要有JavaScript的面向对象编程？这个问题很严肃——这取决你问题的规模和应用的范围。就像JavaEE和PHP一样：PHP能实现的东西，JavaEE都能实现，那么，为什么还要有PHP？因为JavaEE太复杂了，对于一些简单的系统，根本没有必要是使用它，也就是所谓的“杀鸡焉用牛刀”。JavaScript主要应用于Web开发中。在传统的Web开发模式中，JavaScript起到的是一些点缀的作用，只完成很有限的功能，例如表单验证等。于是，JavaScript多被当做一种过程性语言使用，很难完成复杂的功能。而今天Web2.0的时代，Ajax大行其道，很多复杂的脚本成为其必须的组成部分。在Ajax应用中利用JavaScript面向对象编程风格，能够使逻辑更加清晰，也更有利于问题的解决。如果你想用JavaScript编写一个库，比如ExtJS或者YUI，很难想象你的类库不使用面向对象的编程风格——否则的话，无论是对你还是对使用者的智力都将是一个前所未有的考验！或许，自从面向对象思想提出之后，已经很难有类库不使用面向对象的方式实现了，即便是C语言的库诸如gtk+，也是用C语言将面向对象的思想表现的天衣无缝。面向对象的思想对于大型程序的编写和使用具有不可替代的作用。本系列文章将试图向读者阐述JavaScript的面向对象程序设计。尽管JavaScript中具有很多浏览器相关的概念，如document等内置对象，但是本系列将不涉及这些问题，并且将假设读者已经有JavaScript基础的语法知识等。本系列文章不会从头开始讲述JavaScript的语法，仅仅从纯粹的面向对象角度审视JavaScript，或许，你将会看到一个教程：面向对象程序设计——JavaScript语言描述。这才是本系列文章的目的。数组或许你会奇怪，面向对象的程序设计为什么从数组开始讲起？这是因为„„其间的种种关系吧„„嘿嘿，这里先卖个关子，先来看看我们熟悉的数组在JavaScript里面是什么样子的。1.创建数组在JavaScript中有很多创建数组的方法。比如使用Array函数。不过这不是现在我们要讲述的。现在我们使用简单的方括号“[]”的办法来创建数组。1.varobjAyyar=[];//12.varobjAyyar=[2];//23.varobjAyyar=[a,b,c];//34.varobjAyyar=[newDate(),123,abc];//4复制代码这里有四个创建数组的语句。下面来一一解释一下：第一句，创建一个空的数组；第二句，创建一个数组，数组元素只有一个2；第三句，创建一个数组，数组的元素分别初始化为a,b,c；第四句，创建一个数组，其中第一个元素为一个Date类型的对象，第二个元素是数字123，第三个元素是字符串abc。回顾一下，在Java或者C++语言中，数组是具有相同的数据类型的元素的集合。比如使用Java语言的下面语句1.int[]array=newint[10];复制代码将创建一个能放入10个int类型的元素的数组。数组和其他类型的集合的一个很大的区别是，数组里面只能存放相同数据类型的元素(使用泛型的集合除外)。但是，像上面的第四句，JavaScript的数组怎么能存放不同类型的元素呢？这是因为，JavaScript是弱类型的语言，没有很大的数据类型的差别，所以数组的元素可以放入不同的类型。2.操作数组数组是元素的有序集合。数组中的元素是有序的，这就可以通过下标访问到数组中的每个元素。而且，JavaScript的数组相当的灵活。当你习惯了Java或者C++的数组之后，或许并不习惯JavaScript的数组。在一定程度上，这种数组可以称为一种动态数组。看这样一段代码：1.vararr=[1,2,3,4,5];2.alert(arr.length);//数组长度为53.alert(arr[3]);//arr[3]=44.arr[9]=10;//改变了数组的长度为105.alert(arr[7]);6.alert(arr.length);复制代码首先创建一个数组arr，可以看到它的长度是5，arr[3]是4。这些都是很常见的。那么第三句，arr[9]=10;就有点意思了——在Java中，这句操作将导致数组越界的异常，在C++中，这种操作是极其危险的。但是在JavaScript中，这样的操作是正常的——你可以动态的改变数组的大小！虽然你在创建数组时并没有这么大的长度，但是，你可以在创建之后指定它！这时的arr.length已经自动的变成10了。那么，arr[7]又会是什么呢？经过运行代码我们会看到，arr[7]是undefined。也就是说，虽然arr[9]有了值，但是其中从arr[5]到arr[8]这几个元素都是未定义的，也就是undefined。如果你问JavaScript怎么不给个初始值？唉，饶了它吧！JavaScript并不知道你想要它初始化成什么值啊！万一错了呢？干脆还是别了吧„„1.vararr=[1,2,3,4,5];2.alert(arr.length);//数组长度为53.deletearr[3];//删掉第4个元素4.alert(arr.length);//长度不变5.alert(arr[3]);//arr[3]=undefined6.arr.length=4;//缩短长度7.alert(arr[4]);8.arr.length=10;//增加长度9.alert(arr[6]);复制代码上面的代码也很有意思：使用delete操作符可以删除任意一个数组元素，但是长度并不改变。Java的数组也有一个length属性，用来显示数组的长度。JavaScript的数组也有这个属性。但是，和Java不同的是，后者的length属性并不是只读的！你可以任意的设置数组的length属性的值，无论是扩大还是缩小！只是如上面的代码所示，改变了length之后，越界的元素或者以前没有定义的元素都将成为undefined。也就是说，当length大于原始长度时，从原长度到length-1的元素都将成为undefined；当length小于原始长度时，从length到原长度-1的元素也都会清除设置为undefined。3.非数字的下标？如果动态的length属性还不够灵活的话，那么，JavaScript的数组还有另外的能力。你见到过用字符串做数组下标的吗？Java行吗？C++行吗？JavaScript就行！看看下面的语句：1.vararr=[1,2,3];2.alert(arr[1]==arr[1]);3.arr[js]=4;4.alert(arr[js]);复制代码上面的语句看到，arr[1]和arr[1]实际是一样的效果！这是怎么回事呢？我们用下面的语句验证一下：1.alert(1==1);//true2.alert(1===1);//false复制代码由于JavaScript是弱类型语言，所以在使用变量的时候，JavaScript会尽可能的将它转换成所需要的类型。比如数组下面需要数字，那么提供一个字符串，将会试图把字符串转换成数字。这里的1就成功的转换成了数字1，于是这个语句就成立了。这就是使用==操作符返回true的原因。而===操作符不允许这样的类型转换，所以会返回false。那么，这个arr[js]怎么也能成立呢？这就不是上面的问题了。也就是说，JavaScript实际是允许将字符串作为数字下标的。这在JavaScript中是完全合法的。对象1.对象对象是面向对象程序设计的基础概念之一，只需看看这个名字就已经知道了。在我们熟悉的面向对象语言中，比如Java或者C++，都有着类似的对象定义方法。比如，我们想定义一个类，名字叫Person，有两个属性：name和age，另外有一个方法，将显示出这个Person对象的名字和年龄，那么我们可以用下面的代码实现：Java：1.publicclassPerson{2.privateStringname;3.privateintage;4.5.publicStringgetName(){6.returnname;7.}8.9.publicvoidsetName(Stringname){10.this.name=name;11.}12.13.publicintgetAge(){14.returnage;15.}16.17.publicvoidsetAge(intage){18.this.age=age;19.}20.21.publicvoidintroduction(){22.System.out.println(Mynameis+this.name+,myageis+this.age);23.}24.25.publicstaticvoidmain(String[]args){26.Personp=newPerson();27.p.setName(Tom);28.p.setAge(20);29.p.introduction();30.}31.}复制代码C++的实现也是类似的，这里不再赘述。我们先来看一下这个类的定义：首先声明属性，然后定义属性的getter和setter方法，用来外界访问私有变量，最后定义了它自己的方法。这是一个比较常见的定义方式，以至于以后的很多语言，比如C#，都采用这种定义。那么，什么是对象呢？对象不过是具有特定属性和方法的集合。虽然这并不是一个严格的定义，但是将属性和它的名字(不妨我们把它的方法也看作是它的属性，这并没有什么不同)放在一起，形成一个集合，这就是对象。也就是说，简单来看，对象就是这种具有“键-值”对的形式。2.JavaScript的对象“键-值”对的形式„„这个样子看上去是不是有些面熟？Bingo！对了！这不就是数组的形式吗？嗯，恭喜你想到这一点！的确，在JavaScript中，对象的定义就是像数组的定义。下面，我们在JavaScript中对这个Person进行一下定义：1.varPerson={2.name:Tom,3.age:20,4.introduction:function(){5.alert(Mynameis+this.name+,myageis+this.age);6.}7.};8.Person.introduction();复制代码来看一下这段代码。看上去很像数组的定义，只不过数组一般使用数字类型作为下标，而这里我们使用