javascript面向对象 教程.ppt

ACCP V4.0第第 二二 章章 JavaScript面向对象面向对象ACCP V4.02q了解JavaScript面向对象q撑握JavaScript中的类型q理解JavaScript函数对象q撑握声明JavaScript类的方法q撑握实现JavaScript类的继承q撑握JavaScript类的多态q撑握JSVM的配置目标ACCP V4.03qJavaScript面向对象是指采用面向对象的思想编写JavaScript脚本。q采用面向对象的JavaScript开发比采用传统的面向过程的JavaScript应用更加健壮。q面向对象的继承，多态等特征可以极大的提高JavaScript应用的开发效率。q面向对象的JavaScript框架及应用日益增多：qDojo JavaScript的套开源类库qPrototype 一套用于构建JavaScript面向对象开发的基础类库qGoogle Maps,Gmail等AJAX应用JavaScript面向对象介绍ACCP V4.04qJavaScript是一门弱类型的语言，即变量类型运行时确定。qJavaScript中常见的类型：q基本类型：数字(Number)，字符串(String)，布尔值(Boolean)q小数据类型：null,undefinedq复合类型，由基本类型构成：对象(Object)，数组(Array)q特殊类型：函数(Function)q基础工具类：全局对象Globals,日期Date,数学Math,正则表达式RegExp及错误对象Error，这些由JavaScript内置建立的类。JavaScript的类型ACCP V4.05qnull是javascript的一个关键字，用于指定一个变量不对应任何的值或对象。qundefined不是javascript的关键字，它是一个全局变量即Globals对象的一个属性，下列三种情况javascript将返回undefined：q使用一个未定义的变量q使用已经定义但未赋值的变量q使用对象不存在的属性或未赋值的属性qundefined与null并不一样，但一般的情况下一样，例如：null undefined类型ACCP V4.06qundefined与null并不一样，但一般的情况下一样，例如：qalert(undefined=null)返回trueqvar foo=“”alert(foo.bar=null);返回truealert(foo.bar=undefined);返回trueq但：alert(undefined=null)返回false,=是javascript中全等操作符。null undefined类型ACCP V4.07q函数在javascript中是一种特殊的对象类型，函数可以作为值赋给变量，获作为参数传递给另一个函数，或作为其它函数的返回，例如：函数类型/函数作业变量的值var foo=function()var bar=function(fun);bar(foo);/将函数作为参数值传递var myfun=function()/函数作业其它函数的返回值 return function();/forEach实现遍历数组的方法，/fn为传递的回调方法Array.forEach=function(fn)for(var i=0;ithis.length;i+)fn(thisi);var nums=1,2,3;nums.forEach(function(num)alert(num););ACCP V4.08q函数对象在调用时具有的属性：qarguments调用函数时传递的参数，它类似一个数组由脚本解释器负责建立qarguments.caller获取调用当前函数的父函数的引用。函数类型qarguments保存调用函数时的参数引用qlength参数的个数qcallee arguments所对应的函数var factorial=function(n)if(n=0)return 1;return n*argments.callee(n 1);q示例展示了使用callee计算n阶乘的递归方法调用ACCP V4.09q示例使用函数的caller属性获取调用的堆栈信息：函数类型window.onload=function()var bar=function()var fun=arguments.callee;var callstack=;while(fun&fun.caller!=window)callstack=callstack+=n调用函数：+fun+nn;fun=fun.caller;alert(callstack);var foo=function()bar();foo();ACCP V4.010q函数是JavaScript中的特殊对象，它具有多重身份可以作业变量的值，参数或返回值，也可以用于声明JavaScript的类。q类名称即为函数的名称，函数即为类的构造函数。函数类型function Foo()this.propa=bar;/赋予当前对象的属性值 this.propb=bar2;var fooa=new Foo();/建立Foo的实例var foob=new Foo();var testb=“bar string”;/建立字符串对象alert(fooa instanceof Foo);/返回truealert(testb instanceof Foo);/返回falseACCP V4.011q函数的apply及call方法提供将函数绑定到其它对象执行，函数中this将指向绑定的对象。qapply与call的区别在于调用时参数的形式不同qapply的格式apply(thisObj,argArray);thisObj待绑定的对象argArray调用函数的参数数组qcall的格式call(thisObj,arg1,arg2,.argN);thisObj待绑定的对象arg1,arg2 argN调用函数传递参数函数类型ACCP V4.012apply及call示例function Test1()this.prop=test1;this.method=function(msg)alert(this.prop+:+msg);function Test2()this.prop=test2;this.method=function(msg)alert(this.prop+:+msg);/直接调用对象的方法var obj1=new Test1();var obj2=new Test2();obj1.method(msg1);obj2.method(msg2);obj1.method.call(obj2,msg1);/使用call绑定到obj2上执行obj2.method.call(obj1,msg2);obj1.method.apply(obj2,msg1);/使用apply绑定到obj2上执行obj2.method.apply(obj1,msg2);ACCP V4.013qthis,with都是javascript中的关键字qthis主要用于两种地方q在构造函数中，指代新创建的对象q在对象的方法被调用时，指代调用该方法的对象函数若是一个普通的函数this将指向windowqwith用于缩短javascript代码Javascript中的this与withwith(Math)x=cos(3*PI)+sin(LN10);y=tan(14*E);ACCP V4.014qJavascript提供for.in.语句用于遍历对象的属性和方法，typeof方法可用于获取对象的类型。qJavaScript对象属性可通过.或获取。中是属性或方法名的字符串q示例中遍历对象的属性和方法，如果是属性获取其值，如果是方法则执行对象内省functionTest()this.prop=test;this.fa=function()alert(fa);var t=new Test();for(var p in t)if(typeof(tp)=Function)tp();/执行方法 else alert(tp);/输出属性值 ACCP V4.015qJavaScript支持面向对象的编程，支持面向对象的封装，继承，多态等特征。qJavaScript中支持两种方式声明类:q使用函数声明类q使用对象的prototype的方式声明类JavaScript中声明类ACCP V4.016q示例使用函数声明Test类。JavaScript中声明类function Test()this.prop=test;var bar=“bar”;this.fa=function()alert(fa);Test.staticProp=“static prop”;Test.staticMethod=function();q示例中this.prop为类的公开的属性，而bar则是一个私有属性，私有属性只能在当前函数中使用。qstaticProp和staticMethod为该类的静态属性及静态方法，静态属性及方法只能通过类引用。ACCP V4.017qJavascript中的类都具有prototype的属性，指定为该属性的值，该类的实例对象将会自动继承。JavaScript中声明类function Test()Test.prototype=prop:test,fa:function()alert(fa);/大括号声明了一个匿名的对象var test=new Test();alert(test.prop);/得到test字符串q使用prototype的方式声明类更加简洁，在大量的框架中有使用。ACCP V4.018qJavascript中并没有直接提供类的继承，但可以通过复制代码的方式实现。q复制代码可以解决继承的问题，但父类修改时子类又需要重新编码。q解决重复代码的问题可考虑使用for.in 语句复制作属性及方法类的继承function TestB()for(var name in Test)/遍历所有Test类的属性及方法拷贝到TestB类中 TestB.prototypename=Test.prototypename;TestB.prototype.fa=function()q示例TestB继承了Test的属性及方法，并且重载了Test的fa的方法。ACCP V4.019q使用for.in.可解决父类与子类代码一致的问题，但每次继承都需要编写for.in语句。q示例中通过为Object对象定义一extend方法来简化JavaScript中继承操作，Object是JavaScript中的类类的继承Object.extend=function(destination,source)for(prop in source)destinationprop=sourceprop;return destination;/使用TestB的extend方法继承Testfunction TestB()Object.extend(TestB.prototype,Test);Object.extend(TestB.prototype,fa:function()alert(testb.fa);/重载Test的fa方法ACCP V4.020q使用Object.extend方法也可以扩展javascript基本类型的功能，示例为String添加escape方法，将当前自符串转换成url编码类的继承Object.extend(String.prototype,escape:function()return escape(this););ACCP V4.021qJavaScript中实现多态的方式与继承类似，在父类里可以使用一个未定义的方法，该方法即是一个抽象方法，在子类中再具体实现。类的多态/父类方法function Base()Base.prototype.initialize=function()this.init();/调用子类的方法 /父类初始化function TestB=;TestB.prototype=Object.extend(init:function()alert(TestBinit);,Base.prototype);var testa=new TestA();var testb=new TestB();/返回TestAinitalert(testa.initialize();/返回TestBinitalert(testb.initialize();function TestA=;TestA.prototype=Object.extend(init:function()alert(TestAinit);,Base.prototype);ACCP V4.022qJavaScript提供了new运算符用于构建类的实例。qJavaScript中支持JSON数据格式，JSON可用于定义JavaScript的匿名对象或数组。qJavaScript充许动态的添加对象的属性或方法。类的实例/定义JSON格式的匿名对象var employee=id:001,name:jerry;/定义JSON格式的数组对象var employees=id:001,name:jerry,id:002,name:tony,employee;/动态添加employee的属性employee.address=xmbcit;ACCP V4.023qIE中如需进行JavaScript调试，需要安装如下软件：qMicrosoft Script EditorqVisual InterdevqVisual Studio.NETqVisual Studio 2005另外需要将IE的禁用脚本调试选项取消。IE调试JavaScript代码ACCP V4.024qFireFox中提供了Firebug插件，可方便调试Firefox中的网页，它的主要功能：q运行时动态查看页面的DOM元素qJavaScript控制台，用于显示JavaScript的错误及调试信息qJavaScript调试，提供了一个Debug调试器可方便设置JavaScript断点。qCSS查看器，可以查看网页中任意DOM元素的样式q网络监视器，可以监视，统计网页的流量FireFox中调试JavaScriptACCP V4.025qAptana一个专门为AJAX应用而设计的集成开发环境，它支持多种AJAX框架，包括：Prototype,script.aculo.us,Dojo,AFLAX等。qAptana有两个版本：q集成开发环境Aptana studioqEclipse插件版，需要Eclipse3.2以上版本qAptana充许用户建立自己的profiles来指定代码关联显示，通地Aptana的Code Assist Profiles视图可配置工程的javascript提示脚本。JavaScript开发工具ACCP V4.026q在基于AJAX的RIA(Rich Internet Application)的应用中，JavaScript的类非常多，除遵守面向对象的开发原则外，还需要有效的组织JavaScript类的存储。qJSVM提供了一种组织JavaScript的框架，采用动态加载JavaScript脚本的机制，以类似于Java的包,类的组织方式来组织JavaScript的类。qJSVM中每个公开的类对应一个js文件，文件名与类名一致。q包是一种特殊的对象，可以包含类，顶层的包是Window的对象JSVM简介ACCP V4.027q在项目中添加JSVM，只需要将JSVM的根目录拷贝至项目中。qJSVM中所有的类都存放在classes目录中，在页面上只需要引入jsre.js即可。q加入JSVM的页面可在JavaScript脚本中使用$import(“包名.类名”)方式引用依赖的JavaScript类。组织JSVM的环境$import(“foo.bar.SayHello”);/加载依赖的JavaScript类 function method()$import(“sys.init.Reader”);/Script中动态加载 var reader=new sys.init.Reader();ACCP V4.028qJSVM在执行$import时根据import的参数的路径从classes目录中查找对应包文件夹下，对应类的XXX.class.js文件，使用AJAX动态下载，最后使用JavaScript的eval方法动态执行js文件的内容，以建立js文件中的类对象。q每个包对应一个文件夹，顶层的包需要建立一个与包同名的XXX.class.js文件，并且在其中建立包对象，示例：foo.class.js是一个顶层包的js文件，其中声明了foo包对象，它是window的一个属性。JSVM应用window.foo=/建立包ACCP V4.029qJSVM中的类是声明在包下的，示例：声明的Bar类属于foo包下，Bar.class.js文件需要置于foo包文件夹下。JSVM应用$import(“foo”);/引入包对象的定义foo.Bar=function()/类名必需与Bar.class.js一致 ;foo.Bar.prototype.init=function()/Bar类的方法q类文件中也可以声明JS对象$import(“foo”);/引入包对象的定义foo.Globals=;/指定foo.Globals是一JSON格式的对象。ACCP V4.030qJSON作为JavaScript内置的数据格式，在Java中也可以利用JSON的库文件将JAVA对象映射至相应的JavaScript的对象。q反之JSON的服务器端JSON库也可以将JSON格式的字符串转换成相应的JAVA对象。qJSON转换的库文件主要包含两个：qjson-lib-1.1-jdk15.jar用于在服务器执行JSON字符串与Java对象的转换qjson.js用于在客户端执行JSON字符串与JavaScript对象之间的转换JSON库文件ACCP V4.031q服务器端的JSON库主要包括以下几个类：qJSON接口所有类型的JSON对象都实现它，它的方法指定了如何将一个对象转换成JSON字符串。qJSONObject用于执行Java对象与JSON字符串之间的转换。qJSONArray用于执行Java集合对象与JSON字符串之间的转换。qJSONFunction用于执行Java方法与JavaScript方法之间的转换。服务器端JSONACCP V4.032q示例描述与如何将一个Employee转换成JSON的字符串，以及将一个JSON描述的Employee转换成Java的Employee对象。服务器端JSONEmployee emp=new Employee();emp.setId(100l);emp.setName(张三);JSONObject jo=JSONObject.fromBean(emp);/以下将输出：birth:null,name:张三,id:100System.out.println(jo.toString();ACCP V4.033q示例描述与如何将一个Employee转换成JSON的字符串，以及将一个JSON描述的Employee转换成Java的Employee对象。服务器端JSONEmployee emp=new Employee();emp.setId(100l);emp.setName(张三);JSONObject jo=JSONObject.fromBean(emp);/以下将输出：birth:null,name:张三,id:100System.out.println(jo.toString();String json=name:李雷,id:300;JSONObject job=JSONObject.fromString(json);Object obj=JSONObject.toBean(job,Employee.class);Employee empb=(Employee)obj;/以下将输出：300:李雷System.out.println(empb.getId()+:+empb.getName();ACCP V4.034q以下示例展示了如何将JSON数组字符串转换成JAVA的List对象，将JSON对象转换成Map服务器端JSONString jsonemps=id:100,name:张三,id:200,name:李四,id:300,name:王五;JSONArray array=JSONArray.fromString(jsonemps);List ls=JSONArray.toList(array,HashMap.class);/*以下将输出id:100,name:张三id:200,name:李四id:300,name:王五*/for(Object obj:ls)Map map=(Map)obj;System.out.println(id:+map.get(id)+,name:+map.get(name);ACCP V4.035qjson.js提供了在javascript中将字符串转换成JavaScript对象以及将JavaScript对象转换成JSON字符串的方法。q示例：客户端json.js使用 var emp=id:100,name:张三;/以下将输出：id:100,name:张三 alert(emp.toJSONString();var str=id:200,name:李四,id:300,name:王五;/以下将输出:2alert(eval(+str+).length);ACCP V4.036总结qJavaScript中的类型qJavaScript中的函数类型qJavaScript声明类的方式q建立JavaScript实例对象q调试JavaScript脚本q使用Aptana集成环境开发JavaScript应用qJSVM的原理与应用qJSON库的使用