JS面向对象.ppt

1、JavaScript面向对象,2,JS的数据类型,JS声明类,3,JSVM简介,5,JSON简介,4,目录,1,JS面向对象介绍,总结,6,2,JavaScript面向对象是指采用面向对象的思想编写JavaScript脚本。 采用面向对象的JavaScript开发比采用传统的面向过程的JavaScript应用更加健壮。 面向对象的继承，多态等特征可以极大的提高JavaScript应用的开发效率。 面向对象的JavaScript框架及应用日益增多： Dojo JavaScript的套开源类库 Prototype 一套用于构建JavaScript面向对象开发的基础类库 Google Maps,Gm

2、ail等AJAX应用,JavaScript面向对象介绍,3,JavaScript是一门弱类型的语言，即变量类型运行时确定。 JavaScript中常见的类型： 基本类型：数字(Number)，字符串(String)，布尔值(Boolean) 小数据类型：null,undefined 复合类型，由基本类型构成：对象(Object)，数组(Array) 特殊类型：函数(Function) 基础工具类：全局对象Globals,日期Date,数学Math,正则表达式RegExp及错误对象Error，这些由JavaScript内置建立的类。,JavaScript的类型,4,null是javascript

3、的一个关键字，用于指定一个变量不对应任何的值或对象。 undefined不是javascript的关键字，它是一个全局变量即Globals对象的一个属性，下列三种情况javascript将返回undefined： 使用一个未定义的变量 使用已经定义但未赋值的变量 使用对象不存在的属性或未赋值的属性 undefined与null并不一样，但一般的情况下一样，例如：,null undefined类型,5,undefined与null并不一样，但一般的情况下一样，例如： alert(undefined = null)返回true var foo=“” alert(foo.bar = null);返回

4、true alert(foo.bar = undefined);返回true 但：alert(undefined = null)返回false,=是javascript中全等操作符。,null undefined类型,6,函数在javascript中是一种特殊的对象类型，函数可以作为值赋给变量，或作为参数传递给另一个函数，或作为其它函数的返回，例如：,函数类型,/函数作为变量的值 var foo = function() var bar = function(fun) ; bar(foo);/将函数作为参数值传递 var myfun = function() /函数作为其它函数的返回值 ret

5、urn 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); );,7,函数对象在调用时具有的属性： arguments调用函数时传递的参数，它类似一个数组由脚本解释器负责建立 arguments.caller获取调用当前函数的父函数的引用。,函数类型,arguments保存调用函数时的参数引用 leng

6、th参数的个数 callee arguments所对应的函数,var factorial = function(n) if(n = 0) return 1; return n * argments.callee(n 1); ,示例展示了使用callee计算n阶乘的递归方法调用,8,示例使用函数的caller属性获取调用的堆栈信息：,函数类型,window.onload = function() var bar = function () var fun = arguments.callee; var callstack = ; while(fun ,9,函数是JavaScript中的特殊对象，

7、它具有多重身份可以作为变量的值，参数或返回值，也可以用于声明JavaScript的类。 类名称即为函数的名称，函数即为类的构造函数。,函数类型,function Foo() pa = bar;/赋予当前对象的属性值 pb = bar2; var fooa = new Foo();/建立Foo的实例 var foob = new Foo(); var testb = “bar string”;/建立字符串对象 alert(fooa instanceof Foo);/返回true alert(testb instanceof Foo);/返回false,10,函数的

8、apply及call方法提供将函数绑定到其它对象执行，函数中this将指向绑定的对象。 apply与call的区别在于调用时参数的形式不同 apply的格式 apply(thisObj , argArray); thisObj待绑定的对象 argArray调用函数的参数数组 call的格式 call(thisObj ,arg1 ,arg2 , .argN); thisObj待绑定的对象 arg1,arg2 argN调用函数传递参数,函数类型,11,apply及call示例,function Test1() p = test1; this.method = function(ms

9、g) alert(p + : + msg); function Test2() p = test2; this.method = function(msg) alert(p + : + 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.m

10、ethod.apply(obj2, msg1);/使用apply绑定到obj2上执行 obj2.method.apply(obj1, msg2);,12,this,with都是javascript中的关键字 this主要用于两种地方 在构造函数中，指代新创建的对象 在对象的方法被调用时，指代调用该方法的对象 函数若是一个普通的函数this将指向window with用于缩短javascript代码,Javascript中的this与with,with(Math) x = cos(3 * PI) + sin(LN10); y = tan(14 * E); 省略了Math x = Math.cos

11、(3 * Math.PI) + Math.sin(Math.LN10); y = Math.tan(14 * Math.E);,13,Javascript提供for.in.语句用于遍历对象的属性和方法，typeof方法可用于获取对象的类型。 JavaScript对象属性可通过.或获取。中是属性或方法名的字符串 示例中遍历对象的属性和方法，如果是属性获取其值，如果是方法则执行,对象内省,functionTest() p = test; this.fa = function() alert(fa); var t = new Test(); for(var p in t) if(ty

12、peof(tp) = Function) tp();/执行方法 else alert(tp);/输出属性值 ,14,JavaScript支持面向对象的编程，支持面向对象的封装，继承，多态等特征。 JavaScript中支持两种方式声明类: 1、使用函数声明类 2、使用对象的prototype的方式声明类,JavaScript中声明类,15,示例使用函数声明Test类。,JavaScript中声明类,function Test() p = test; var bar = “bar”; this.fa = function() alert(fa); Test.staticProp

13、= “static prop”; Test.staticMethod = function () ;,示例中p为类的公开的属性，而bar则是一个私有属性，私有属性只能在当前函数中使用。 staticProp和staticMethod为该类的静态属性及静态方法，静态属性及方法只能通过类引用。,16,Javascript中的类都具有prototype的属性，指定为该属性的值，该类的实例对象将会自动继承。,JavaScript中声明类,function Test() Ttotype = prop:test, fa: function() alert(fa); ;/大括号

14、声明了一个匿名的对象 var test = new Test(); alert(p);/得到test字符串,使用prototype的方式声明类更加简洁，在大量的框架中有使用。,17,Javascript中并没有直接提供类的继承，但可以通过复制代码的方式实现。 复制代码可以解决继承的问题，但父类修改时子类又需要重新编码。 解决重复代码的问题可考虑使用for . in 语句复制作属性及方法,类的继承,function TestB() for(var name in Test)/遍历所有Test类的属性及方法拷贝到TestB类中 TestB.prototypename = Test.

15、prototypename; TestB.prototype.fa = function() ,示例TestB继承了Test的属性及方法，并且重载了Test的fa的方法。,18,使用for . in.可解决父类与子类代码一致的问题，但每次继承都需要编写for .in语句。 示例中通过为Object对象定义一extend方法来简化JavaScript中继承操作，Object是JavaScript中的类,类的继承,Object.extend = function(destination, source) for(prop in source) destinationprop = sourcepro

16、p; return destination; /使用TestB的extend方法继承Test function TestB() Object.extend(TestB.prototype, Test); Object.extend(TestB.prototype, fa:function() alert(testb.fa);/重载Test的fa方法 ,19,使用Object.extend方法也可以扩展javascript基本类型的功能，示例为String添加escape方法，将当前字符串转换成url编码,类的继承,Object.extend(Stotype, escape:f

17、unction() return escape(this); );,20,JavaScript中实现多态的方式与继承类似，在父类里可以使用一个未定义的方法，该方法即是一个抽象方法，在子类中再具体实现。,类的多态,/父类方法 function Base() Btotype.initialize = function() this.init();/调用子类的方法 /父类初始化 ,function TestB = ; TestB.prototype = Object.extend( init:function() alert(TestBinit); , Btotype);

18、,var testa = new TestA(); var testb = new TestB(); /返回TestAinit alert(testa.initialize(); /返回TestBinit alert(testb.initialize();,function TestA = ; TestA.prototype = Object.extend( init:function() alert(TestAinit); , Btotype);,21,JavaScript提供了new运算符用于构建类的实例。 JavaScript中支持JSON数据格式，JSON可用于定义Jav

19、aScript的匿名对象或数组。 JavaScript充许动态的添加对象的属性或方法。,类的实例,/定义JSON格式的匿名对象 var employee = id:001, name:jerry ; /定义JSON格式的数组对象 var employees = id:001,name:jerry,id:002,name:tony,employee ; /动态添加employee的属性 employee.address = xmbcit;,22,在基于AJAX的RIA(Rich Internet Application)的应用中，JavaScript的类非常多，除遵守面向对象的开发原则外，还需要

20、有效的组织JavaScript类的存储。 JSVM提供了一种组织JavaScript的框架，采用动态加载JavaScript脚本的机制，以类似于Java的包,类的组织方式来组织JavaScript的类。 JSVM中每个公开的类对应一个js文件，文件名与类名一致。 包是一种特殊的对象，可以包含类，顶层的包是Window的对象,JSVM简介,23,在项目中添加JSVM，只需要将JSVM的根目录拷贝至项目中。 JSVM中所有的类都存放在classes目录中，在页面上只需要引入jsre.js即可。 加入JSVM的页面可在JavaScript脚本中使用$import(“包名.类名”)方式引用依赖的Jav

21、aScript类。,组织JSVM的环境, $import(“foo.bar.SayHello”);/加载依赖的JavaScript类 function method() $import(“sys.init.Reader”);/Script中动态加载 var reader = new sys.init.Reader(); ,24,JSVM在执行$import时根据import的参数的路径从classes目录中查找对应包文件夹下，对应类的XXX.class.js文件，使用AJAX动态下载，最后使用JavaScript的eval方法动态执行js文件的内容，以建立js文件中的类对象。 每个包对应一个文

22、件夹，顶层的包需要建立一个与包同名的XXX.class.js文件，并且在其中建立包对象，示例：foo.class.js是一个顶层包的js文件，其中声明了foo包对象，它是window的一个属性。,JSVM应用,window.foo = /建立包,25,JSVM中的类是声明在包下的，示例：声明的Bar类属于foo包下，Bar.class.js文件需要置于foo包文件夹下。,JSVM应用,$import(“foo”);/引入包对象的定义 foo.Bar = function()/类名必需与Bar.class.js一致 ; foo.Btotype.init = function () /

23、Bar类的方法,类文件中也可以声明JS对象,$import(“foo”);/引入包对象的定义 foo.Globals = ;/指定foo.Globals是一JSON格式的对象。,26,JSON作为JavaScript内置的数据格式，在Java中也可以利用JSON的库文件将JAVA对象映射至相应的JavaScript的对象。 反之JSON的服务器端JSON库也可以将JSON格式的字符串转换成相应的JAVA对象。 JSON转换的库文件主要包含两个： json-lib-1.1-jdk15.jar用于在服务器执行JSON字符串与Java对象的转换 json.js用于在客户端执行JSON字符串与Java

24、Script对象之间的转换,JSON库文件,27,服务器端的JSON库主要包括以下几个类： JSON接口所有类型的JSON对象都实现它，它的方法指定了如何将一个对象转换成JSON字符串。 JSONObject用于执行Java对象与JSON字符串之间的转换。 JSONArray用于执行Java集合对象与JSON字符串之间的转换。 JSONFunction用于执行Java方法与JavaScript方法之间的转换。,服务器端JSON,28,示例描述与如何将一个Employee转换成JSON的字符串，以及将一个JSON描述的Employee转换成Java的Employee对象。,服务器端JSON,Em

25、ployee emp = new Employee(); emp.setId(100l); emp.setName(张三); JSONObject jo = JSONObject.fromBean(emp); /以下将输出：birth:null,name:张三,id:100 System.out.println(jo.toString();,29,示例描述与如何将一个Employee转换成JSON的字符串，以及将一个JSON描述的Employee转换成Java的Employee对象。,服务器端JSON,Employee emp = new Employee(); emp.setId(100l); emp.setName(张三); JSONObject jo = JSONObject.fromBean(emp); /以下将输出：birth:null,name:张三,id:100 System.out.println(jo.toString(); String json = name:李雷,id:300; JSONObject job = JSONObject.fromString(json); Object obj = JSONObject.toB