JS中创建对象的方式及对象使用
案例思路:
案例演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义对象</title>
<script type="text/javascript">
//采用直接量的方式创建对象
function f1(){
var stu = {"name":"张三",
"age":23,
"work":function(){alert("我要学JavaScript")}
};
alert(stu.name);
alert(stu.age);
stu.work();
}
//采用js自带构造器创建对象
function f2(){
var teac = new Object();
teac.name = "王老师";
teac.age = 50;
teac.work = function(){
alert("我教JavaScript");
};
alert(teac.name);
alert(teac.age);
teac.work();
}
//采用自定义构造器创建对象
function Coder(name,age,work){
//this代表创建出来的对象
//.key代表对象的属性
this.name = name;
this.age = age;
this.work = work;
}
function f3(){
var cd = new Coder("李四",26,
function(){alert("我写JavaScript")});
alert(cd.name);
alert(cd.age);
cd.work();
}
/* function f3(){
var cd = new Coder("李四",26,
function(){alert("我写JavaScript") return 2});
alert(cd.work());
} */
</script>
</head>
<body>
<input type="button" value="直接量"
onclick="f1();">
<input type="button" value="自带构造器"
onclick="f2();">
<input type="button" value="自定义构造器"
onclick="f3();">
</body>
</html>
最终页面显示效果:
直接量:
自带构造器:
自定义构造器: