1.下面部分的代码,将是从目前十分流行的JSON数据格式以及javascript数组,来一步步像大家阐述javascript中的面向对象思想。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>JSON数据格式</title>
- <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
- <script type="text/javascript">
- function jsonTest() {
- //定义json数据格式 -- 以文本的形式存在,转换为javascript对象或者数组
- //对象中可以包含数组,数组中也可以包含对象,可以存在相互嵌套的关系
- var json1 = "[1,2,{a:123,b:'str',c:[100,200]}]";//数组形式
- var parsejson1 = eval(json1);//将纯文本的内容转换为javascript原生支持的json
- var json2 = "{name:'dinglang',age:21,hobby:['武术','电影']}";//对象形式
- //var parsejson2 = eval(json2); //这样直接转换会报错
- //当被eval()转换的纯文本json数据为对象形式时,需要在前后加上"()"
- var parsejson2 = eval("(" + json2 + ")"); //这样转换就可以了
- alert("");
- }
- //探索一下JSON这种数据格式的由来
- //1.首先是回顾一下javascript数组的相关知识
- function arrTest() {
- // 1)数组的基本定义与赋值
- var arrOne = new Array(); //第一种创建方法
- var arrTwo = new Array(0,1,2);//第二种创建方式(创建的时候就给数组赋初始值)
- var arrThree = []; //第三种方式 --定义一个空数组
- var arrFour = [1, 2, 3, 5]; //第四种方式--定义一个数组,并给数组赋初始值
- //创建多维数组
- var arrFive = new Array(1, new Array(2, 3), 4, 5); //创建一个多维数组(嵌套的)
- var arrSix = [1, [2, 3], 4];//创建一个多维数组
- // 2)数组的基本操作(数组是javascript语言中一种很重要的数据结构)
- alert(arrSix[1]); //通过数组下标,来获取数组中对应的某个元素
- arrSix[0] = 100; //给数组中下标对应的元素赋值(如果该元素还未创建,就创建该元素并赋值)
- arrSix[99] = 888; //arrSix中会自动创建下标为99的元素,并给其赋值 --javascript中数组的长度是可以随时改变的
- // 3)javascript当中数组常用的一些方法
- //concat方法的使用 --可以做数组的连接或者合并,原数组的内容不变,将返回一个新的数组对象
- var arrFour1 = arrFour.concat(101, 102, 103);//第一种连接方式
- var arrFour2 = arrFour.concat([104, 105]);//第二种连接方式
- var arrFour3 = arrFour.concat(arrFour1); //将已经定义的数组进行连接
- //join方法--将数组中元素,按照指定的分隔符连接成字符串输出,原数组的内容不变
- //slice方法--返回当前数组中的子数组,原数组中的内容不会改变
- //push/pop 在数组的尾端追加(push)或弹出(pop),将会修改原数组的内容
- arrFive.push(107);//在数组尾部追加一个元素
- arrFive.pop(); //弹出数组中最后一个元素
- //在数组的开头追加(shift)和unshift(弹出)操作
- arrFive.reverse(); //反转数组中的元素
- arrFive.sort(); //按照字母是顺序,对数组中的元素进行升序排列
- arrFive.sort(function (a, b) {
- return a - b;
- }); //按照数值大小,进行升序排列。如果返回的是负值,那么a就会出现在b的前面
- arrFive.sort(function (a, b) {
- return b - a;
- }); //按照降序排列
- //splice 可以删除数组中一部分元素,并把部分元素进行返回。也可以在指定位置添加元素
- var arrSplice1 = arrSix.splice(3, 2); //从下标为3的元素开始删除,删除2个元素
- var arrSplice2 = arrSix.splice(4); //从下标为4的元素开始删除,一直删除到数组的末尾
- arrSix.splice(1, 0, 401, 402); //在下标为1的元素前面,插入401,402这两个元素
- arrSix.splice(1, 0[188, 189]);//在下标为1的元素前面,插入[188,199]
- }
- //2.javascript中的对象的定义、使用
- var obj1 = new Object(); //定义一个对象
- var obj2 = {}; //使用"{}"也可以定义一个对象
- //给对象增加属性
- obj1.num = 1;
- obj1.str = "string";
- obj1.sayHello = function () {
- alert("Hello");
- }
- obj2.srcObj = obj1; //将obj1对象作为obj2对象的属性
- //属性的访问 --第一种访问方式
- obj1.num; //也可以这么访问 obj2.srcObj.num;
- obj1.str; //obj2.srcObj.str;
- obj1.sayHello(); //obj2.srcObj.sayHello();
- //属性的访问 --第二种方式
- obj1["num"]; //obj2["srcObj"]["num"];
- obj1["str"]; //obj2["srcObj"]["str"];
- obj1["sayHello"](); //obj2["srcObj"]["sayHello"]();
- //通过对象直接量的方式,定义和调用对象、属性
- var obj3 = {
- num: 1,
- str: "string",
- sayHello: function () {
- alert('Hello');
- }
- }
- //访问方式同上,例如
- obj3.num; //obj3["num"];
- //看清楚了吗?这就是javascript中JSON数据格式的原型
- //下面来深入讲解javascript语言的面向对象特性
- //javascript中定义类,需要用function来模拟
- // function Teacher(){
- //
- // }
- //建议使用下面这种方法来创建一个类,以便将类和函数区分开来(建议定义类时首字母大写)
- var Teacher = function () {
- }
- //定义一个book类,这里的function还承担了构造函数的工作
- //在使用new操作符创建Book对象时,这个funtion里面的代码将会被执行一次
- //this关键字代表的是当前对象
- function Book(name) {
- //定义公有的属性
- this.name = name;
- //定义公有的函数
- this.getName = function () {
- return this.name;
- }
- this.setName = function (nname) {
- this.name = nname;
- }
- }
- function ooTest() {
- var tech = new Teacher();
- alert(tech instanceof Teacher); // instanceof函数,表示是否属于某对象类型
- var book1 = new Book("C#");//这里的new操作相当于先创建了一个简单对象,调用了类的构造函数
- var book2 = new Book("JAVA");
- alert(book1.name);//弹出C#
- alert(book2.name);//弹出JAVA
- book1.setName(".NET");
- alert(book1.name);//弹出.NET
- alert(book2.name); //弹出JAVA
- //function上面都有一个原型对象 --prototype
- var proto = Book.prototype;
- proto.str = "string";
- proto.hello = function () {
- alert("Hello");
- }
- //给原型定义了属性和方法后,拥有这个原型对象的function模拟出来的类,也具有该属性和方法
- alert(book1.str); //弹出string
- book1.hello(); //弹出hello
- }
- </script>
- </head>
- <body>
- <input type="button" value="测试json" onclick="jsonTest()"/>
- </body>
- </html>
未完待续。。。。。