<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js对象---我们自己定义对象(Java中的面向对象建模)</title>
<script type="text/javascript" src="../jsp2/tools/1.js">
//调用另一个文件夹中的tools
</script>
</head>
<body>
<script type="text/javascript">
//方式1: 封装性比较差,比较底层 ---用一个空函数或Object当前对象的原型，然后给该原型手动一步步添加成员变量和方法
function Person() {
//alert("hello");
}
var p = new Person();//hello
p.name = "jack";
p.age = 22;
p.show = function() {//添加成员方法
//alert("name=" + p.name + ",age=" + p.age);//name=jack,age=22
};
//p.show();
//也可以直接用Object对象来创建
var p = new Object();
p.name = "jack";
p.age = 22;
p.s = function() {//添加成员方法
//alert("name=" + p.name + ",age=" + p.age);//name=jack,age=22
};
//p.s();
</script>
<script type="text/javascript">
//方式2: 封装性比较好,更接近于Java中的面向对象建模
function person(name, age) {
this.name = name;
this.age = age;
this.setName = function(name) {
this.name = name;
};
this.getName = function() {
return this.name;
};
this.setAge = function(age) {
this.age = age;
};
this.getAge = function() {
return this.age;
};
this.toString = function() {
return this.name + "," + this.age;
};
}
var p = new person("alice", 22);
//println( p );//alice,22
p.setName("jack");
p.setAge(11);
//println("222: "+ p.getName()+","+p.getAge());//222: jack,11
</script>
<script type="text/javascript">
//方式3: 用于封装数据----Json技术 , 是一种轻量级的数据交换格式
//json的基本格式有两种: map(用大括号封装),list(用中括号封装)
//3.1 map
var p3 = {
"name" : "jack",//此处必须用逗号，逗号表示还有下一个成员，
"age" : 22,
"sex" : "男",
3 : "acc"//最后一个成员变量后面不用写逗号，也不用写分号
};
//访问map中的数据,方式1：对象名["属性名"] -----能通吃所有,,,但不要忘掉引
// println( p3["name"] ); // jack
//println(p3["sex"]);//男
// println(p3["3"]);//acc
//访问map中的数据,方式2：对象名.属性名 ---如果属性名不符合变量名的命名规则，不行!
//println(p3.name);//jack
//println(p3.3);//挂掉,因为这里的属性名是“3”，不符合变量名的命名规则
//3.2 list--array
var s = [ "aa", "vv", "sss" ];
println(s[1]);//vv 访问方式: 对象名[元素序号] ---参见数组元素的访问方式
//3.3 map+list ----项目一般采用的方式
var studs = [ {
"id" : "A001",
"name" : "Jack",
"address" : "湖南长沙",
"age" : 25
}, {
"id" : "A002",
"name" : "张三",
"address" : "湖南益阳",
"age" : 24
}, {
"id" : "A003",
"name" : "孙权",
"address" : "湖北武汉",
"age" : 20
} ];
for ( var i = 0; i < studs.length; i++) {
println(studs[i].id + "," + studs[i]["name"] + studs[i]["address"]
+ "," + studs[i].age);
}//A001,Jack湖南长沙,25 A002,张三湖南益阳,24 A003,孙权湖北武汉,20
/*js中的for...in----相当于把java中的普通for循环和增强for循环合并成一个, 格式:
for(变量 in 对象){
....//对对象中的每个元素分别进行操作
}
*/
//1) for...in访问数组
var ar = [ 1, 2, 3, 4 ];
for (i in ar) {//☆注意，js中i不是元素值，而是元素的序号---对于数组
// println(i);//0123
//println(ar[i]);//1234
}
//2) for...in访问普通对象
for (x in p) { //x是对象的所有成员名称(key)
//println(x);//输出:变量名与方法名
//println(p[x]);//输出: 成员变量的值
}
//3) for...in访问json对象
for (i in studs) {//数组,i是序号
for (key in studs[i]) {//对象, key是属性名且是字符串格式(不能用studs[i].key来访问)
println(studs[i][key] + " ");
}
}
</script>
<script type="text/javascript">
//3.4 map+list2 ----项目中采用的复杂方式
var datas={"studs":[
{"id":"A001", "name":"Jack", "address":"湖南长沙", "age":25},
{"id":"A002", "name":"张三", "address":"湖南益阳", "age":24},
{"id":"A003", "name":"孙权", "address":"湖北武汉", "age":20}
],
"currentPage":15,
"count":100,
"depts":{"name":"信电院","address":"信息楼","num":2000}
};
//第二个学生的地址
println( datas.studs[2].address);//湖北武汉
println( datas["studs"][2]["address"]);//湖北武汉
//当前页码
println( datas.currentPage);//15
println( datas["currentPage"]);//15
//学院地址
println( datas["depts"]["address"]);
</script>
</body>
</html>
