Welcome 微信登录

首页 / 脚本样式 / JavaScript / Javascript面向对象详解(第一部分)

Javascript面向对象详解(第一部分)2010-05-23 博客园 小MM一直想写一篇关于Javascript面向对象的文章,最近终于动工了,本来以为不会写的很长,可是后来发现有很多东西要写,大家先看着这前面的一部分吧,后面有更多的高级特性陆续跟进中,放心,绝对不是太监贴啊,对Javascript对象不太了解或者没有了解的人可以仔细看看哦,有错误之处大家多多指正哦,本人水平有限

(1)为什么要面向对象

在十年前或者也许更晚的时候,javascript都是一种被人当作玩具来使用的语言,大多时候,没有人乐于深入研究它的特性,而只是用它来实现各种花里胡哨的特效来炫耀自己的技术。一时之间,各种网站中都充斥了噪音般的所谓的特效,直至今日,仍然有许多人没有清醒过来。但是Ajax的出现可能促使了大量的设计师开始关注Javascript,从而扭转了互联网的表现。的确,互联网是一个方便用户的地方,而不是一个炫耀个人技巧的地方,简单易用才是我们应该坚持的原则。

互联网趋向于简单易用,那Javascript还有什么意义呢?很多人说毕竟它只是一个玩具啊!和flash,silverlight比起来它的表现形式实在是太单调了,可是Javascript远没有想象的那么幼稚,它是一门发展了将近二十年的各方面都很完善的语言,它的表现丰富,虽然在图形方面它有着一定的缺点,但是在与html的交互中它却有着极其强大的功能,它虽然在很多特性方面都很简单,但是它的确是一门非常灵活的语言。

对于Javascript,很多初学者喜欢将其作为一种类似c的函数式语言来使用,这种写法的特点就是除了全局变量就是函数,这样写代码也未尝不可,但是它有着先天的弊端,首先它会创建大量的全局变量,全局变量过多会造成内存泄漏(如果没有在使用完之后手动回收的话),而且全局变量在脚本中的任何位置都是可见的,很多时候会不小心在某个函数里定义了一个和全局变量名字相同的变量,这样会造成混淆,这种混淆是致命的。第二个缺点也是为什么现在所有的语言都以面向对象作为自己的卖点的原因,因为当程序逻辑变得越来越复杂的时候,代码关系越来越复杂,想象有1000行代码,其中有50个函数,这50个函数之间的关系又相互依赖,当你写到第1001行的时候突然想到要向某个关系中再插入一个函数,你记得这个关系链在哪里吗?其中的关系又如何呢?如果你能用这种方式来写代码,而又可以记住无数复杂的关系,即使睡一觉也不会忘记的话,你就是天才。可惜天才是没有这样写代码的,高手写代码会考虑很多东西,例如:松耦合,重用性,内存回收,闭包特性,封装,下面会涉及到一些相关的东西。

(2)对象与函数

Javascript的对象是什么呢?让我们先来想想在其他声称面向对象的语言中它是什么吧,其实面向对象在我理解来就是一种组织代码的方式,它可以封装一些属性和方法到一个类,这个类大多时候是现实世界的抽象表达,然后它可以继承,可以多态,可以实例化。

在Javascript中,我认为它的面向对象和其他语言的面向对象有着本质的区别,因为在Javascript中没有类的概念,一切都是对象,对,一切都是对象,但是一切又可以写成完全没有对象的影子的形式,在Javascript中的对象和面向对象的对象有着概念上的不同,Javascript中的对象就是一个基本的实体,例如:html元素中的一个按钮,它就是一个按钮对象,没有实例化自任何类,但是你可以灵活地操作它,可以凭空生成它,也可以动态删除它,看起来的话,我们感觉这更符合我们理解世界的方式,我们不需要任何抽象,一个我们能看到的东西就是一个对象,我们无需想象它原来的抽象的样子,只需要知道它就是一个实实在在的对象就行。而在其他语言中,你要创建一个对象就必须先创建一个抽象的表示(类),然后实例化,这更像是一种组织代码的方式,而不是一种操作现实世界的体验,所以相比于其他的语言,我感觉Javascript的对象更充满了让人兴奋的元素。

与很多编程语言类似,Javascript中的顶级对象是Object(),它是所有对象的父类对象,所以在Javascript中可以用 var myobject=new Object()来定义一个对象,但是实际上这种写法没有什么意义,因为Javascript中的变量是弱类型的,在初始化的时候即使你定义var myobject=0,在稍后你仍然可以将一个对象赋给myobject变量,这种特性是所有的脚本语言都基本具有的特性,它使你不必太关心操纵的变量的类型.

Javascript是一门很奇特而灵活的语言,从Function()顶层对象就可以看出来,Function对象是顶层对象,这意味着什么呢?上例子:

在Javascript中更多时候我们是这样来创建一个基本的对象的:

1 var myobject=function(param1,param2){
2 this.name=param1;
3 this.age=param2;
4 this.showmsg=function(){
5 alert("name:"+this.name+"<br />"+"age:"+this.age);
6 }
7 }

这个基本的对象拥有两个属性和一个方法。如果你以前没有接触过面向对象的Javascript的话,你一定会说我定义了一个函数,但是你也许会对于函数内的this指针感到迷惑,事实上,我们的确定义了一个函数,但是在Javascript中函数是顶级对象(而不是其他语言中的只充当封装一小部分功能的那种函数),上面的代码相当于定义了一个对象,而this则指向了你定义的myobject对象。

关于this指针所指的对象事实上不在本教程的讨论范围之内,但是在一个对象内部它指向的是自己所属的对象,而在某个事件处理函数里,它指向的是接受事件的某个DOM元素,具体可以去google一下。

至于Javascript内部是如何实现对象机制的,或许不必关注太多,而只需要了解有哪些定义对象的方法和如何操作对象即可,事实上,Javascript内部的对象就是一个关联数组,由以名称作为键的字段和方法组成,这从如何遍历一个Javascript对象就可以看出来,就拿上面定义的myobject来说吧,遍历方法如下:

var mynew=new myobject("a","b");//首先初始化一个对象,像这种带有参数的对象需要先初始化
for(obj in myobject){
alert(myobject[obj]);//弹出对象包含的所有元素
}

结果将弹出三次窗口,分别是 a,b,function(){……}

定义对象(函数)的方法有很多种,下面列举其中的几种:

1.function myobject(){}
2.var myobject=function(){}
3.var myobject=new Object();
myobject.name="";
myobject.age="";

4.JSON方式,这是一种比较特殊但是又常用的方式,并且JSON可以用于与服务器交互信息,它的格式显而易见,结构清晰,具有比xml先天的优势,并且它是纯字符串,可以方便地在服务器和客户端之间传送,具体可以去google搜索一下,因为涉及到了一个较大的领域,而我们本文的目的是介绍一些Javascript的高级特性,故暂不提及JSON