ajax实战之jquery深度开发对象与原型

1、对象与原型Ajax实战之jQuery深度开发java与c#语言都是class-based程序语言,它们的面向对象开发分为两个步骤：（1）定义一个class（2）实例化这个class到object,并使用它特点：class一旦定义不能再改，object的所有成员遵循class的定义Javascript中没有class的概念， javascript是属于prototype-based程序语言,都是直接通过构造函数创建对象区别：javascript中所有的东西都是对象，它没有类的概念，所以可以通过对象本身任意扩充成员，如果使用prototype原型对象，那么此函数对应的所有对象副本将都会得到。一、j

2、avascript的面向对象概述 可以采用构造函数用于定义一个对象，比如：function person(name) = name; newperson = new person(张三);alert();二、创建对象javascript中的一切都是Object，他们的实例和构造器，都是Object。Object是一个：无序的成员集合它是一个集合，说明它包含0-n个成员。而它是无序的。每一个成员由以下3个部分组成：名称、值、特征集合比如:上面的例子就有一个键值对:key: value:namejavascript的对象成员可能包含下面几种特征,形成特征集合,注意：如下的内容是不能直接在对象上操作

3、的，罗列此特征集合是为了让你更深入的了解javascript对象的本质。如下:ReadOnly：拥有这个特征的成员是不能被程序修改的。DontEnum：拥有这个特征的成员是不能被for in遍历的。DontDelete：拥有这个特征的成员是不能被delete操作删除的。Internal：代表这个成员是内部成员。通常内部成员不能被程序以任何方式访问，但是有些javascript的引擎实现将它以特殊方式暴露，使得可以访问对象的某些内部成员。2.1、什么是对象一个对象的Internal成员可能有如下的成员，用xxxx的方式来表示:Class：表示该对象的类型。比如function Object的Cl

4、ass 值是“Function“,string Object的Class是String,普通Object的值是ObjectGet(PropertyName)：获取对象的属性值。DefaultValue(Hint)：用于隐式转换。hint参数可能的值为string或number“.Prototype：Prototype成员实现了javascript中所谓的“原型链”。一个对象的Prototype成员可能是object对象，或者是null。只有Ototype为null,这样就形成了一个基于原型链的继承关系,Object对象是所有对象的祖先(原型链终点).Call：function

5、 Object特有的成员，在函数被调用的时候，就是调用的Call。Construct：function Object特有的成员，在函数作为构造器，被new操作符用于创建对象的时候，就是调用的Construct。Scope：简单来说就是变量的作用域。2.1.1、Internal成员事实上Object对象是所有的对象的祖先， Object提供了所有对象通用的功能，比如可以创建一个字符串： v1=new Object(aa); 效果与new String(“aa”)一样Object既为所有对象的原型，也可以直接使用,但是意义不大，比如： newobject = new Object(); perty

6、1 = aa;见备注中的Object创建对象的例子2.2、Object对象语法如下：with(对象)属性1=value1;属性2=value2;好处：一次定义，在括弧内多不用重复使用见备注中的一段例子2.3 With对象语句的使用语法如下：for(prop in obj)objprop;说明：可以遍历对象的所有属性见备注中的一段例子2.4 for/in语句的使用当一个内置对象被实例化之后,它的构造函数就是对应的内置对象的构造函数: aa = aa; document.write(aa.constructor); /function String() native code 每个内置对象都有自己

7、的构造函数2.5 关于内置函数的再思考使用Object对象并不能很好的表达对象的意义,所以可以采用构造函数来实现,如下: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(); / 建立对象objC = 江小鱼;objCard.age = 25;objCard.phone = 02-33

8、333333;objCard.email = “”;/注意属性可以自扩展2.6 自定义对象通过构造函数来实现通过constructor属性获得构造函数除了Math对象外，都可以通过constructor返回的各自的构造函数,比如:aa=1; /function Number() native code aa=aa; /function String() native code aa=true; /function Boolean() native code aa=function person()=test /function Function() native code aa=new per

9、son(); /function person()=test javascript可以对constructor返回的内容直接判断，比如：aa=1;document.write(aa.constructor=Number);construnctor针对对象而言，对于内置对象的判断要实例化,如下：document.write(new Object().constructor);/function Object() native code document.write(new Function().constructor);/function Function() native code docum

10、ent.write(new String().constructor);/function String() native code document.write(new Number().constructor);/function Number() native code document.write(new Boolean().constructor);/function Boolean() native code document.write(new Array().constructor);/function Array() native code document.write(ne

11、w RegExp().constructor);/function RegExp() native code document.write(new Date().constructor);/function Date() native code document.write(new Error().constructor);/ function Error() native code 2.7 construct构造器toString()方法：将对象转换为字符串对于：v2=function add(a,b)return a+b;v1=new String(aa);则:add. toString(

12、)是function的具体内容，v2. toString()是function的具体内容String. toString()是String构造函数而v1. toString()则是字符串aavalueOf()方法：传回对象值对于：v2=function add(a,b)return a+b;v1=new Object(2);则:add. valueOf()是function的具体内容，v2. valueOf()是function的具体内容Object. valueOf()是Object构造函数而v1. valueOf()则是数值22.8 对象的一些通用的方法通过将给属性赋function可以为

13、对象增加方法，如下：/ 对象的构造函数function nameCard(name,age,phone,email) = name; this.age = age; this.phone = phone; this.email = email; this.print = printCard;/ 对象方法function printCard() document.write(姓名 : + + );/ 建立自定义对象var objMyCard = new nameCard(“test, 33, 02-22222222, );objMyCard.print();2.9、新增加对象的方法对象的属性可以

14、拥有另一个子对象，例如：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.phone.cellphone=“9”;见备注中的

15、演示代码2.10、对象嵌套比如：function person(name,phone)=name,this.phone=phoneoneperson=new person(张三,);创建一个对象的步骤为：1)解析器在遇到function declaration或者function expression的时候，会创建一个Function Object。2) 解析形参和函数体3) 设置Function对象的Class、Prototype、Call、Construct、Scope、length属性4) 创建一个Object对象5) 设置Object对象的constructor属性为function

16、person(name,phone)=name,this.phone=phone 6) 设置Function的prototype属性为name,phone,还有一个原型链指向Object.注意：1、Object对象作为原型链的最终点，他的prototype属性为Null，所以Object是所有对象的祖先。 2、只有function才有原型（prototype），对于object本身是通过constructor指向的构造函数获取prototype中的属性。三、函数我们发现创建函数有如下几种方式： /创建一个func1的函数function func1(a,b)alert(a+b);/创建一个匿名

17、函数，并赋给func2var func2=function(a,b)alert(a+b)/创建一个func4函数，并赋值给func3var func3=function func4(a,b)alert(a+b)/建立Function对象var func5=new Function(a,b,alert(a+b)注意：一、函数还可以表示为:var fun6=; /创建一个没有内容的匿名构造函数（即对象），并赋值给fun6,使用时不需要实例化二、如果表示为：var fun6=a:1,b:2,则还初始了两个属性a,b，分别是1和23.1、函数的表现形式传统的函数其实是作为window对象的一个方法使用

18、，比如： function add(a, b) return a + b; 还可以作为构造函数来使用，比如：var fun7 =new function(a,b)return a+b;，不过这个时候fun7不是函数了，而是一个对象，所以使用的时候一定要这么调用：alert(fun7.constructor(1,2);如果对函数做了new操作，相当于建立了一个副本，如：var fun7 = function add(a, b) return a + b; newfun7 = new add(1, 2); alert(newfun7.constructor(1,2);3.1.1、传统的函数的再思考

19、JSON即JavaScript Object Natation，它是一种轻量级的数据交换的文本格式。其作用是提供结构化数据的一种表示，而不依赖于所用的语言和平台。使用这种格式，可以在不同语言编写的应用程序之间交换数据，而且可以在不同机器上运行应用程序。与XML相比（这可能是最著名的数据交换格式），JSON的语法很简洁。这说明，通过网络传输JSON数据通常需要更少的带宽。3.2.2： 使用JSON格式一段xml如下： 1 Jackson Welcome to W 2 Relkn W关注互联网新技术 JSON结构如下：json表示：代码: items:id:1,author:Jackson,url

20、:,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;1,对象:name:Peggy,email:,homepage: 属性 : 值 , 属性 : 值 , 属性 : 值 2,数组是有顺序的值的集合。一个数组开始于，结束于，值之间用,分隔。name:Peggy,email:,ho

21、mepage:, name:Peggy,email:,homepage:,name:Peggy,email:,homepage:3, 值可以是字符串、数字、true、false、null，也可以是对象或数组。这些结构都能嵌套。3.2.2： 使用JSON格式简单 JSON 示例按照最简单的形式，可以用下面这样的 JSON 表示名称/值对： firstName: Brett 这个示例非常基本，而且实际上比等效的纯文本名称/值对占用更多的空间：firstName=Brett 但是，当将多个名称/值对串在一起时，JSON 就会体现出它的价值了。首先，可以创建包含多个名称/值对的记录，比如： first

22、Name: Brett, lastName:McLaughlin, email: 从语法方面来看，这与名称/值对相比并没有很大的优势，但是在这种情况下 JSON 更容易使用，而且可读性更好。例如，它明确地表示以上三个值都是同一记录的一部分；花括号使这些值有了某种联系。值的数组当需要表示一组值时，JSON 不但能够提高可读性，而且可以减少复杂性。例如，假设您希望表示一个人名列表。在 XML 中，需要许多开始标记和结束标记；如果使用典型的名称/值对（就像在本系列前面文章中看到的那种名称/值对），那么必须建立一种专有的数据格式，或者将键名称修改为 person1-firstName 这样的形式。如果

23、使用 JSON，就只需将多个带花括号的记录分组在一起： people: firstName: Brett, lastName:McLaughlin, email: , firstName: Jason, lastName:Hunter, email: , firstName: Elliotte, lastName:Harold, email: 这不难理解。在这个示例中，只有一个名为 people 的变量，值是包含三个条目的数组，每个条目是一个人的记录，其中包含名、姓和电子邮件地址。上面的示例演示如何用括号将记录组合成一个值。当然，可以使用相同的语法表示多个值（每个值包含多个记录）： progr

24、ammers: firstName: Brett, lastName:McLaughlin, email: , firstName: Jason, lastName:Hunter, email: , firstName: Elliotte, lastName:Harold, email: ,authors: firstName: Isaac, lastName: Asimov, genre: science fiction , firstName: Tad, lastName: Williams, genre: fantasy , firstName: Frank, lastName: Per

25、etti, genre: christian fiction ,musicians: firstName: Eric, lastName: Clapton, instrument: guitar , firstName: Sergei, lastName: Rachmaninoff, instrument: piano 这里最值得注意的是，能够表示多个值，每个值进而包含多个值。但是还应该注意，在不同的主条目（programmers、authors 和 musicians）之间，记录中实际的名称/值对可以不一样。JSON 是完全动态的，允许在 JSON 结构的中间改变表示数据的方式。在 Java

26、Script 中使用 JSON掌握了 JSON 格式之后，在 JavaScript 中使用它就很简单了。JSON 是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。将 JSON 数据赋值给变量例如，可以创建一个新的 JavaScript 变量，然后将 JSON 格式的数据字符串直接赋值给它（见备注）访问数据尽管看起来不明显，但是上面的长字符串实际上只是一个数组；将这个数组放进 JavaScript 变量之后，就可以很轻松地访问它。实际上，只需用点号表示法来表示数组元素。所以，要想访问 programmers 列表的第

27、一个条目的姓氏，只需在 JavaScript 中使用下面这样的代码： grammers0.lastName; 注意，数组索引是从零开始的。所以，这行代码首先访问 people 变量中的数据；然后移动到称为 programmers 的条目，再移动到第一个记录（0）；最后，访问 lastName 键的值。结果是字符串值 “McLaughlin”。下面是使用同一变量的几个示例。 people.authors1.genre / Value is fantasy people.musicians3.lastName / Undefined. This refers to the fourth entry

28、, and there isnt one grammers.2.firstName / Value is Elliotte 利用这样的语法，可以处理任何 JSON 格式的数据，而不需要使用任何额外的 JavaScript 工具包或 API。修改 JSON 数据正如可以用点号和括号访问数据，也可以按照同样的方式轻松地修改数据：people.musicians1.lastName = Rachmaninov;JSON对象和JSON字符串为了方便地处理JSON数据，JSON提供了json.js包，下载地址：在数据传输过程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，J

29、SON对象和JSON字符串之间的相互转换是关键 例如： JSON字符串: var str1 = name: cxh, sex: man ;JSON对象: var str2 = name: cxh, sex: man ;JSON对象和JSON字符串一、JSON字符串转换为JSON对象要使用上面的str1，必须使用下面的方法先转化为JSON对象：var obj = eval( + str + ); /由JSON字符串转换为JSON对象或者var obj = str.parseJSON(); /由JSON字符串转换为JSON对象或者var obj = JSON.parse(str); /由JSON字

30、符串转换为JSON对象然后，就可以这样读取：或者new Function形式function strToJson(str)var json = (new Function(return + str)(); return json; Alert();Alert(obj.sex);特别注意：如果obj本来就是一个JSON对象，那么使用eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是使用parseJSON（）函数处理后会有问题（抛出语法异常）。 JSON对象和JSON字符串二、可以使用toJSONString()或者全局方法JSON.stringify()将JSON对象转化为JSON字

31、符串。例如：var last=obj.toJSONString(); /将JSON对象转化为JSON字符或者var last=JSON.stringify(obj); /将JSON对象转化为JSON字符alert(last);JavaScript中的prototype，标准翻译为“原型”，表示对象的初始形态每个函数对象都拥有prototype属性，此属性返回一个prototype对象，prototype对象的属性会被所有的对象副本所继承，使用prototype属性的优点如下：使用prototype对象扩展对象，可以大量减少对象使用的内存空间不论对象是否已经建立副本，都可以使用prototype

32、属性扩展对象的属性和方法见备注中的代码四、prototype理解prototype的机制见备注代码要理解prototype的机制就必须要了解JavaScript中function的创建方式。当代码执行到function Staff(name) = name;时，相当于执行var Staff = new Function(“name”, = name”)解释器将使用预定义好的Function() constructor，来创建一个function类型的object出来，即Staff。 随后给创建好的Staff对象添加_proto_属性，并赋值为Function的构造器的prototype，这一步

33、是所有对象创建过程中都有的步骤，在执行类似var x = new X()方式是，都会把X的prototype赋值给x的_proto_Staff._proto_ = Ftotype; 接下来给Staff创建prototype属性，这一步是创建function类型的对象具有的步骤var o = new Object();o.constructor = Base;Stotype = o; 理解prototype的机制如上的分析我们可知，当创建对象时，会创建一个私有属性_proto_，当创建function是会创建一个prototype属性。因为Staff是一个function类型的对象，所以会同时具

34、有这两个属性。这两个属性是构建原型链的关键属性。我们来分析执行代码 var staff1 = new Staff(“hunter”)时，原型是如何传递的。根据如上分析，staff1._proto_ = Stotype，而Stotype又是一个由Object创建的对象，即Stotype._proto_ = Ototype，所以staff1._proto_ ._proto_ 指向的是Ototype，即staff1._proto_ ._proto_ = Ototype，这就是原型链，当要读取某个对象的属性时，JS首先找对象本身是否有这个属性，如果没有就会顺着原型链一直寻找这个属性。知道了原型链的原理

35、，那么就很容易根据这个原理来构建Javascript中的对象继承。由如上的分析，我们可知原型链的顶端都是Ototype，这就意味着在构建的继承关系中Object是所有对象的基类。prototype属性的应用:假设我们定义了一个Circle类,有一个radius属性和area方法,实现如下:Js代码 function Circle(radius) this.radius = radius; this.area = function() return 3.14 * this.radius * this.radius; var c = new Circle(1); alert(c.area(); /

36、3.14 假设我们定义了100个Circle类的实例对象,那么每个实例对象都有一个radius属性和area方法,实际上,除了radius属性,每个Circle类的实例对象的area方法都是一样,这样的话,我们就可以把area方法抽出来定义在Circle类的prototype属性中,这样所有的实例对象就可以调用这个方法,从而节省空间.Js代码 function Circle(radius) this.radius = radius; Ctotype.area = function() return 3.14 * this.radius * this.radius; var c = new Ci

37、rcle(1); alert(c.area(); /3.14 可以使用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 + );/ 新增Prototype对象方法function getArea()

38、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;totype.area = getArea; objCircle1.display();objCircle1.area(); / 执行Prototype方法objCircle2.display();objCircle2.area(); / 执行Prototy

39、pe方法4.1、增加原型的方法与属性原型链每个对象实例都有个属性成员用于指向到它的instanceof 对象(暂称为父对象)的原型(prototype) 我们把这种层层指向父原型的关系称为原型链 prototype chian 原型也具有父原型，因为它往往也是一个对象实例，除非我们人为地去改变它 在JavaScript中，一切都是对象，函数是第一型。 Function和Object都是函数的实例。 Function的父原型指向到Function的原型，Ftotype的父原型是Object的原型 Object的父原型也指向到Function的原型，Ototype是所有父原型的顶层原型链在火狐浏览

40、器中spiderMonkey引擎中，父原型可以通过Prototype( _proto_ )进行访问/Animal构造函数 function Animal(name) = name; /Animal原型对象 Atotype = id:Animal, sleep:function() alert(sleep); var dog = new Animal(旺才); alert(); /旺才 alert(dog.id); /Animal dog.sleep(); /sleep 原型链首先明确一点prototype与prototype并不是同一个东西。 那先来看prototype，每一个函数对象都有一个

41、显式的prototype属性，它代表了对象的原型，更明确的说是代表了由函数对象（构造函数）所创建出来的对象的原型。结合本例，Atotype就是dog的原型，dog所引用的那个对象将从Atotype所引用的对象那继承属性与方法。 每个对象都有一个名为Prototype的内部属性，指向于它所对应的原型对象。在本例中dog的prototype指向Atotype，大家都知道，Atotype也是一个对象，即然是一个对象，那它必然也有prototype属性指向于它所对应的原型对象，由此便构成了一种链表的结构，这就是原型链的概念。额外要说的是：不同的JS引擎实现者可以将内部Prototype属性命名为任何名

42、字，并且设置它的可见性，前且只在JS引擎内部使用。虽然无法在JS代码中访问到内部Prototype（FireFox中可以，名字为_proto_因为Mozilla将它公开了），但可以使用对象的 isPrototypeOf() 方法进行测试，注意这个方法会在整个Prototype链上进行判断。 原型链例子：Ftotype.hi = function()alert(hi Function);Ototype.hi = function()alert(hi Object);var a = function() this.txt = a;totype = say:function()alert(a);原型

43、链alert(a instanceof Function);/a是Function的实例;alert(a._proto_ = Ftotype);/a的父原型指向到Function的原型;alert(Function instanceof Object);/Function是Object的实例;alert(Function._proto_ = Ftotype);/Function的父原型指向到Function的原型;alert(Ftotype._proto_ = Ototype);/Function的原型的父原型指向到Object的原型alert(Object._proto_ = Ftotype

44、);/Object的父原型指向到Function的原型;alert(Ototype._proto_);/Object的原型是所有父原型的顶端，它不再具有父原型;alert(totype instanceof Object);/a的原型也是一个对象alert(totype._proto_ = Ototype);/a的原型的父原型指向Object的原型原型链var A = function();A.prototype = new a();A.prototype.say = function() alert(A);alert(A instanceof Function);/A是Function的实例

45、alert(A._proto_ = Ftotype);/A的父原型指向到Function的原型alert(A.prototype instanceof a);/A的原型是a的实例alert(A.prototype._proto_ = totype);/A的原型的父原型指向到a的原型var iA = new A();/iA是A的实例,iA._proto_ = A.prototypevar iB = new a();/iB是a的实例,iB._proto_ = totype原型链iA.hi();/*iA本身没有hi方法（构造中没有，自己也没有定义过），于是找iA._proto_即A.prototyp

46、e，也没有找到，于是再找A.prototype._proto_即totype，仍然没有发现，继续查找totype._proto_即Ototype，哇，发现了hi，于是调用它，停止查找输出：hi Object*/iB.hi();/*iB本身没有hi方法（构造中没有，自己也没有定义过），于是找iB._proto_即totype，仍然没有发现，继续查找totype._proto_即Ototype，哇，发现了hi，于是调用它，停止查找输出：hi Object*/a.hi();/*a本身没有hi方法（构造中没有，自己也没有定义过），于是找a._proto_既Ftotype，哇，发现了hi，于是调用它，停

47、止查找输出：hi Function*/原型链iA.say();/*iA本身没有say方法（构造中没有，自己也没有定义过），于是找iA._proto_即A.prototype，哇，发现了say，于是调用它，停止查找所以，这里调用的是A.prototype.say输出：A*/iB.say();/*iB本身没有say方法（构造中没有，自己也没有定义过），于是找iB._proto_即totype，哇，发现了say，于是调用它，停止查找所以，这里调用的是totype.say输出：a*/iA.bad();/*iA本身没有bad方法（构造中没有，自己也没有定义过），于是找iA._proto_即A.proto

48、type，也没有找到，于是再找A.prototype._proto_即totype，仍然没有发现，继续查找totype._proto_即Ototype，终于是找不到了，停止查找返回错误，iA.bad不是一个function*/原型链 让我们再来看一个更加复杂的示例，他明确的解释了prototype、prototype（_proto_ ）、原型链 见备注代码原型链画出相应的内存图 javascript的对象继承可以将一个对象扩展成为其他对象，即不但可以使用对象作为原型建立其他对象，还可以扩展对象的属性和方法对象的原型形成原型链，可以通过原型链实现对象的继承见备注中的代码五、对象的继承因为Obje

49、ct对象是所有原型链的最终点，只需要对Object原型做一个扩展就可以实现所有对象的扩展,比如：Operty1 = aa;function person(name) = name;newperson = new person(张三);alert(perty1);newsting = new String(aa);alert(perty1);alert(perty1);alert(Fperty1);在javascript中所有的东西都是对象,所以，几乎很少有人去给Object的prototype添加方法，因为那会影响到所有的对象，除非在你的架构中这种方法的确是所有对象都需要的。五、Object对

50、象的扩展Fucntion对象也可以进行扩展。构造函数本身的扩展通过Function对象的原型来完成，比如： Fperty1 = aa; function person(name) = name; alert(perty1); alert(Sperty1);但是对于alert(new person(“张三”).property1),则没有影响。六、Function对象的扩展Javascript提供的内置对象作用是有限的，很多开源的javascript类库都对内置对象进行了扩展，当我们在阅读微软Ajax类库的时候，发现对内置对象做了大量的扩展。见备注的代码。七、其它内置对象的扩展function reverse_string() for(var i=(this.length-1); i=0; i-) document.write(this.charA