网页编程--JSON对象封装的三种方式
2017年08月28日 20:12:43
阅读数：170
首先,先说添加属性或方法的两种方式
1)通过原型对象: 克隆对象.prototype.属性名/函数名=xxx ---更改的是所有克隆对象
2)通过克隆对象: 克隆对象.属性名/函数名=xxx ---更改的是当前克隆对象
下面说JSON封装三种方式:
先做一个JS输出工具,--peintln(print)
-
//print函数--输出到页面 -
function print(str){ -
document.write(str+" "); -
} -
function println(str){ -
/* -
if(typeof(str)=="undefined"){ //undefined数据，判断类型时，要用引号 -
document.write("<br>"); -
}else{ -
document.write(str+"<br>"); -
} -
*/ -
if(str==undefined){ //undefined数据，判断值时，不要用引号 -
document.write("<br>"); -
}else{ -
document.write(str+"<br>"); -
} -
}
-
<head> -
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> -
<title>JSON对象</title> -
<script type="text/javascript" src="../day4/js/out.js"></script> -
</head>
※封装方式1 通用格式: this.变量名或函数名 = ...
-
function Person(name,age){ -
//给this对象(Function对象)添加属性 -
this.name = name; -
this.age = age; -
//给this对象添加方法(函数) -
this.toString = function(){ -
println("Person信息:"+this.name+","+this.age); -
}; -
this.getName =function(name){ -
return this.name; -
}; -
this.setName = function(name){ -
this.name = name; -
}; -
}
测试代码:
-
var p = new Person("Jack",22); -
// p.setName("TOM"); -
//alert(p.name+ "," + p.age); -
p.toString();
※方式二(类似创建值对象。new一个空对象，在外部给对象添加成员)
-
var obj = new Object(); -
obj.name = "Rose"; -
obj.age = "25"; -
obj.toString=function(){ -
println(this.name+","+this.age); -
}; -
obj.toString();
※※方式三(数据封装，我们以后用得最多的就是这种方式，以致我们以后讲JSON，一般指的就是这种)
1.数组(用中括号): 读取元素时用: 数组[下标]
-
//小知识点: for(变量 in 对象){ -
...//对象每一个变量进行操作,其中的变量:若变量为数组时为下标, -
}
-
var arr = ["aa",10,true,u]; -
for( x in arr){ -
document.write(x+" "); //下标: 0 1 2 3 -
} -
document.write("<br>"); -
for( x in arr){ -
document.write(arr[x]+" "); //元素值: aa 10 true 张三,24 -
} -
document.write("<br>");
重点:
2.Map(用大括号)
/*格式:var Map = {key:value,key1:value2...}
*1.key可以是字符串,也可以不是,可以加引号也可不加
*2.如果key符合变量规则,则元素访问方式可以是:map.key1或者map["key1"]
* 如果不符合只能是map["key1"];
*/
-
var map = { -
"name":"张飞", -
"age":25, -
"getName":function(){return name;}, -
}; -
println(map.name); -
println(map.age); -
println(map.getName); -
println(map["name"]); -
println(map["age"]); -
/* -
*1)对象.属性--属性名必须符合变量名的命名规则,否则不行 -
*2)对象["属性名"]--通吃所有Map -
*/ -
var datas ={ -
8:"aa", -
3:"张良", -
aa:20 -
}; -
println(datas["8"]);
下面做一个小小练习:
-
<script type="text/javascript"> -
var map = { -
"employees": [ -
{ "firstName":"Bill" , "lastName":"Gates" }, -
{ "firstName":"George" , "lastName":"Bush" }, -
{ "fir stName":"Thomas" , "lastName":"Carter" } -
], -
name:"来自W3Cschool例" -
}; -
// alert(map.name); //AC -
// alert(map["name"]); //AC -
// alert(map.employees[1].firstName);//Ok -
// alert(map["employees"][1]["lastName"]);//AC -
</script>
测试结果如下:都通过!!
JSON对象封装用map方式是最常用的,但是一般JS高手会用方式一,不过感觉差不多.......