自定义对象与扩展.ppt

1、自定义对象与扩展,传统的函数其实是作为window对象的一个方法使用，比如： function add(a, b) return a + b; alert(window.add(1, 1);,一、传统的函数,JavaScript函数的一个特点是函数可以嵌套。这说明，可以在一个函数中声明另一个函数。比如： functon parent(arg)var testVariable=I am a test variable.; function child()alert(arg+testVariable); child(); 调用parent(“yes,”),产生”yes,I am a test va

2、ribale.”的对话框。 闭包就是将child();修改为return child;返回函数。 使用闭包： var child=parent(“yes”);child();,1.1、闭包,刚刚的例子中子函数使用其父函数作用域中定义的两个参数（arg和testVariable）在屏幕上显示了一个消息。不过，调用子函数时可以不带任何参数：这样就把一个需要多个参数的函数转换为一个需要较少参数的函数（在这里就是一个无参数的函数）。这种技术称为修整（currying）。 返回一个函数，这是c#语言不支持的。 闭包的这个特殊的功能可以带来一些有意思的应用。比如： ajax2.0类库中的代理，就是通过Fu

3、nction的这种扩展功能实现的，如： Function.createDelegate = function(a, b) return function() return b.apply (a, arguments) ; 在C# 中的匿名方法（anonymous methods）与这个功能有点类似，但是不能称为闭包，不过匿名方法实现了一种与闭包类似的技术。,1.2、修整,可以采用构造函数用于定义一个对象，比如： function person(name) = name; newperson = new person(张三); alert(); 我

4、们通过typeof方法获得构造函数对应的数据类型是function，如： alert(typeof (person);,二、构造函数,构造函数是一个函数，能够定义对象的属性和方法，每个内置对象都有自己的构造函数，例如String对象的是String(),Array对象的是Array() 使用构造函数的语法如下： function obj(property1,property2) perty1=property1; perty2=property2; 实例化这个对象： newobj=new obj(“value1”,”value2”); 如果实例化没有传入属性值，

5、也可以实例化之后再赋值，如： newobj=new obj(); perty1=“value1”; perty2=“value2”;, function nameCard(name,age,phone,email) = name; this.age = age; this.phone = phone; this.email = email; var objMyCard = new nameCard(张三, 33, 02-22222222, ); var objCard = new nameCard(); / 建立对象 objCard.

6、name = 江小鱼; objCard.age = 25; objCard.phone = 02-33333333; objCard.email = .tw; / 显示objMyCard对象属性 document.write(姓名 : + objMyC + ); document.write(年龄 : + objMyCard.age + ); document.write(电话 : + objMyCard.phone + ); document.write(电子邮件 : + objMyCard.email + ); / 显示objCard对象属性 document.write(

7、姓名 : + objC + ); document.write(年龄 : + objCard.age + ); document.write(电话 : + objCard.phone + ); document.write(电子邮件 : + objCard.email + ); ,构造函数的例子,传统的面向对象开发分为两个步骤： （1）定义一个class （2）实例化这个class到object,并使用它 特点：class一旦定义不能再改，object的所有成员遵循class的定义 Javascript中的对象是通过function创建的 区别：javascript中的对象本身

8、可以任意扩充成员，如果使用property原型对象，那么此函数对应的所有对象副本将都会得到。,2.1、javascript面向对象概述,事实上Object对象是所有的对象的祖先， Object的构造函数支持传入参数，比如可以创建一个字符串： v1=new Object(aa); 效果与new String(“aa”)一样 前面的例子： function person(name) = name; newperson = new person(张三); 实例化之后变成了object，如： alert(typeof (newperson); object既为所有对象的原型，也可以

9、直接使用,但是意义不大，比如： newobject = new Object(); perty1 = aa; alert(perty1); 内置对象本身对应的是定义后的构造函数，比如： alert(typeof (String); /相当于String =function(). 实例化之后变成对象 alert(typeof(new String(aa);,三、 Object对象, var objCard = new Object(); / 新增对象属性 objC = 张三; objCard.age = 33; objCard.

10、phone = 02-22222222; objCard.email = ; document.write(姓名 : + objC + ); document.write(年龄 : + objCard.age + ); document.write(电话 : + objCard.phone + ); document.write(电子邮件 : + objCard.email + ); 注意：javascript对象还可以对属性进行objCard“name”这样方式的引用。,Object对象的例子,语法如下： with(对象) 属性1=value1; 属性2=value2; 好处

11、：一次定义，在括弧内多不用重复使用,3.1 With对象语句的使用, var objCard = new Object(); with(objCard) name = 张三; age = 33; phone = 02-22222222; email = ; document.write(姓名 : + name + ); document.write(年龄 : + age + ); document.write(电话 : + phone + ); document.write(电子邮件 : + email + ); ,With对象语句的例子,语法如下： for(prop in obj) objp

12、ro; 说明：可以遍历对象的所有属性,3.2 for/in语句的使用, for/in循环 测试for/in循环 / 变量声明 var prop; var objAddress = new Object(); objA = “张三; objAddress.age = 33; objAddress.phone = 02-22222222; objAddress.email = ; / 循环语句 for (prop in objAddress) document.write(属性: + prop + = + objAddressprop + ); ,for/in语句的例子,对象

13、的属性可以拥有另一个子对象，例如： function nameCard(name,age,phone,email) =name; this.age=age; this.phone=new phoneList(phone,N/A); this.email=email; 其中phoneList的构造函数如下： function phoneList(homephone,cellphone) this.homephone=homephone; this.cellphone=cellphone; phoneList的cellphone还可以通过下面的语法进行修改： objMyCard.

14、phone.cellphone=;,四、对象嵌套, function nameCard(name,age,phone,email) = name; this.age = age; this.phone = new phoneList(phone, N/A); this.email = email; function phoneList(homephone,cellphone) this.homephone = homephone; this.cellphone = cellphone; var objMyCard = new nameCard(

15、张三, 33, 02-22222222, ); / 设定手机电话号码 objMyCard.phone.cellphone = 0901-666666; var objCard = new nameCard(江小鱼, 25, 02-33333333 , .tw); / 新增另一只手机的属性 objCard.cellphone = 0900-777777; ,对象嵌套的例子,通过将给属性赋function可以为对象增加方法，如下： / 对象的构造函数 function nameCard(name,age,phone,email) = name; this.age = age;

16、this.phone = phone; this.email = email; this.print = printCard; / 对象方法 function printCard() document.write(姓名 : + + ); / 建立自定义对象 var objMyCard = new nameCard(陈会安, 33, 02-22222222, ); objMyCard.print();,五、新增加对象的方法,java与c#语言都是class-based程序语言，而javascript是属于prototype-based程序语言 calss-based语言类属于

17、一种抽象数据类型，和实例化后的对象完全不同，而prototype-based语言的类和对象并没有很大的区别，对象在Prototype-Based语言属于一个实际的实体，可以使用现成的对象作为原型(prototype)建立其他对象，此对象可以分享原型对象的属性和方法，使用prototype对象可继承其它对象。 每个对象都拥有prototype属性，此属性就是一个prototype对象，prototype对象的属性会被所有的对象副本所继承，使用prototype属性的优点如下： 使用prototype对象扩展对象，可以大量减少对象使用的内存空间 不论对象是否已经建立副本，都可以使用prototyp

18、e属性扩展对象的属性和方法,六、prototype对象, function circle(r, color) this.r = r; this.color = color; this.display = showCircle; function showCircle() document.write(半径 : + this.r + ); document.write(色彩 : + this.color + ); document.write(圆周率 : + this.PI + ); var objCircle1 = new circle(2, red); var objCircle2 = ne

19、w circle(3, green); / 新增Prototype对象属性常数 totype.PI = 3.1415926; objCircle1.display(); objCircle2.display(); ,prototype对象的例子,还可以使用prototype增加方法，如： function circle(r, color) this.r = r; this.color = color; this.display = showCircle; function showCircle() document.write(半径 : + this.r + ); docu

20、ment.write(色彩 : + this.color + ); document.write(圆周率 : + this.PI + ); / 新增Prototype对象方法 function getArea() var result = this.PI * this.r * this.r; document.write(圆面积 : + result + ); var objCircle1 = new circle(2, red); var objCircle2 = new circle(3, green); totype.PI = 3.1415926; circle.pr

21、ototype.area = getArea; objCircle1.display(); objCircle1.area(); / 执行Prototype方法 objCircle2.display(); objCircle2.area(); / 执行Prototype方法 ,七、新增prototype对象的方法,javascript对象的prototype属性不仅能够新增自定义对象的方法，对于内置对象，一样可以使用prototype新增对象的方法，比如String对象： var objMessage=new String(“javascript”); Stotype.rev

22、erse=revse_string; Stotype.even=even_string;,八、扩展javascript内置对象的方法, function reverse_string() for(var i=(this.length-1); i=0; i-) document.write(this.charAt(i); document.write(); function even_string() var output = ; for(var i=0; i); / 执行对象方法 objMessage.reverse(); strOutput = objMessage.eve

23、n(); / 执行对象方法 document.write(strOutput + ); ,扩展javascript内置对象的例子,javascript的对象继承可以将一个对象扩展成为其他对象，即不但可以使用对象作为原型建立其他对象，还可以扩展对象的属性和方法 见备注中的代码,九、prototype对象的继承,只需要对Object原型做一个扩展就可以实现所有对象的扩展,比如： Operty1 = aa; function person(name) = name; newperson = new person(张三); alert(newp

24、perty1); newsting = new String(aa); alert(perty1);,十、对象扩展,Javascript提供的内置对象作用是有限的，很多开源的javascript类库都对内置对象进行了扩展，前面我们介绍的内置对象只要对原型对象增加属性就可以实现扩展，比如：var objMessage=new String(“javascript”); Stotype.reverse=revse_string; 当我们在阅读 ajax2.0客户端类库的时候，发现有这样的代码： Function._typeName = “

25、Function”; 我们发现除了对一些常用的内置对象进行扩展外，还能对本身的fucntion对象进行扩展。 构造函数本身的扩展通过Function对象来完成 Fperty1 = aa; function person(name) = name; alert(perty1); alert(Sperty1);,十一、函数的扩展,函数是进行模块化程序设计的基础，编写复杂的Ajax应用程序，必须对函数有更深入的了解。JavaScript中的函数不同于其他的语言，每个函数都是作为一个对象被维护和运行的。

26、创建函数有如下几种方式： /创建一个func1的函数 function func1(a,b)alert(a+b); /创建一个匿名函数，并赋给func2 var func2=function(a,b)alert(a+b) /创建一个func4函数，并赋值给func3 var func3=function func4(a,b)alert(a+b) /建立Function对象 var func5=new Function(a,b,alert(a+b) 注意： 函数还可以表示为: var fun6=; /创建一个没有内容的匿名函数，并赋值给fun6,十二、函数的表现方式,运行下面的代码：alert(

27、typeof(Function); alert(typeof(new Function(); alert(typeof(Array); alert(typeof(Object); alert(typeof(new Array(); alert(typeof(new Date(); alert(typeof(new Object(); 前面4条语句都会显示“function”，而后面3条语句则显示“object”，可见所有的数据类型只有两种，一个是function，也就是对象的构造函数(function)，而实例化后就变成了对象类型(object),十三、查看内置对象的类型,JSON是一种用于数

28、据交换的文本格式。其作用是提供结构化数据的一种表示，而不依赖于所用的语言和平台。使用这种格式，可以在不同语言编写的应用程序之间交换数据，而且可以在不同机器上运行应用程序。与XML相比（这可能是最著名的数据交换格式），JSON的语法很简洁。这说明，通过网络传输JSON数据通常需要更少的带宽。,十四、JSON,一段xml如下： 1 Jackson Welcome to W 2 Relkn W关注互联网新技术 ,14.1、JSON结构,json表示： 代码: items: id:1, author:Jackson, url:, content:Welcome to W , id:2, author:Relkn, url:, content:W关注互联网新技术 ;,var func5=new Function(“a”,“b”,“alert(a+b)”) 这种方式实际是一种json的表示方式 构造函数也可以表示成这种形式，比如： var customer=firstName:John,lastName:Doe;,Microsoft Ajax Library提供了Sys.Serialization.JavaScript