JavaScript程序基础（十四）自定义对象-直接创建法
一、对象简介
-
什么是类
我经常看到某某大学表白墙上写着找对象的条件：
“170cm以上的女生、端庄漂亮、温柔体贴、学习好、会做饭、懂浪漫…”。
这些条件可以理解为类（Class），就是一个模板，代表符合条件的这一类女生。 -
什么是对象
正巧，一位名叫石榴姐的女孩具备这些条件。
石榴姐是客观存在的事物，她就是对象（Object），是符合条件的一个具体女生。 -
初步体验对象
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<input type="button" id="mybtn" value="click me" />
<script type="text/javascript">
var student = {
name:"张三",
sex:"男",
age:20
}
document.write(student.name+"
");
document.write(student.sex+"
");
document.write(student.age+"
");
script>
body>
html>
这里，student就是一个对象，同时隐含了学生模板，包括姓名，性别，年龄三个部分。
student代表一名具体的学生，姓名是张三，性别为男，年龄20岁。
- 什么时候用对象
对象的概念是一个理解上的难点。
编程时，如果遇到一个简单的数据，考虑用基础数据类型。
例如，我们要简单的表示一个分数：
var score=90;
编程时，如果遇到一个复杂的数据，考虑用对象。
例如，我们要表示一个网站用户，需要多个数据：
var userid="admin";
var pwd="123";
var email="[email protected]";
此时，考虑用对象来表示：
var user1={
loginid: "admin",
pwd: "123",
email: "[email protected]"
}
我们可以把对象当作是归档好的一组数据。
-
JavaScript中的类
JavaScript语言没有“类”，而改用构造函数（constructor）作为对象的模板。
所谓“构造函数”，就是专门用来生成“对象”的函数。它提供模板，作为对象的基本结构。 -
JavaScript中的对象
JavaScript语言中的对象，实际上是一个数据单元，属于一种数据类型（复合数据类型）。就是一些变量和函数的集合。
对象中的变量叫属性；对象中的函数叫方法。 -
对象的属性
对象的属性就是对象具备的各种特征，对象的每个属性都具有特定的值。
石榴姐这个对象，“性别 = 女；身高 = 170cm ”就是对象的属性。 -
对象的方法
对象的方法就是对象执行的操作，对象的方法表明对象能干什么。
石榴姐这个对象，“学习好、会做饭、懂浪漫”就是对象的方法。 -
类与对象的关系和区别
类是抽象的概念，仅仅代表事物的模板，比如说“女朋友”、“男朋友”。
对象是一个能够“看得到，摸得着的”具体的实体，比如石榴姐。
二、直接创建自定义对象
- 语法格式：
var 对象名 = {
属性名1:属性值1,
属性名2:属性值2,
…
属性名n:属性值n
};
定义示例：
var User = {
name:"admin",
pwd:"123"
};
使用方法1：对象名.属性名
document.write(User.name);
document.write(User.pwd);
使用方法2：对象名[属性名]
document.write(User['name']);
document.write(User['pwd']);
- 直接创建对象示例：创建一个篮球球员的对象player，通过对象实例获取对象中的属性并输出。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<input type="button" id="mybtn" value="click me" />
<script type="text/javascript">
var player = {
name: "科比",
height: 1.98,
team: "洛杉矶湖人队"
};
document.write(“球员名称：”+player.name+"
");
document.write(“球员身高：”+player.height +"
");
document.write(“所属球队：”+player.team +"
");
script>
body>
html>
- 给自定义对象添加方法
语法格式：
var 对象名 = {
属性名1:属性值1,
属性名2:属性值2,
…
属性名n:属性值n,
方法名1: function(){
},
…
方法名n: function(){
}
}
简单示例：创建对象User
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<input type="button" id="mybtn" value="click me" />
<script type="text/javascript">
var User = {
name:"admin",
pwd:"123",
login: function(){
alert("登录成功");
}
};
document.write(User.name);
document.write(User.pwd);
User.login();
script>
body>
html>
- 直接创建对象示例：创建一个篮球球员的对象player，通过对象实例获取对象中的属性并输出，并给对象添加"投篮"、"传球"等动作。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<input type="button" id="mybtn" value="click me" />
<script type="text/javascript">
var player = {
name: "科比",
height: 1.98,
team: "洛杉矶湖人队",
shoot: function(){
alert("投篮");
},
passball: function(){
alert("传球");
}
};
document.write(“球员名称：”+player.name+"
");
document.write(“球员身高：”+player.height +"
");
document.write(“所属球队：”+player.team +"
");
player.shoot();
script>
body>
html>
三、创建对象综合案例
创建一个自定义对象，在网页中动态生成表格。
DOCTYPE html>
<html>
<head>
<title>title>
head>
<body>
<script type="text/javascript">
var tb={
row:5,
col:3,
width:300,
height:30,
border:1,
bgcolor:"#DDDDFF",
bgalertcolor:"#FFFFFF"
};
function createtable(tb){
var str=";
for(var i=0;i<tb.row;i++){
if(i%2!=0){
str+="";
}else{
str+="";
}
for(var j=0;j<tb.col;j++){
str+=" ";
}
str+="
";
return str;
}
document.write(createtable(tb));
script>
body>
html>
四、练习
利用对象，创建游戏角色"马里奥"，他身高1.2m，穿背带裤，戴红帽子，能够跳跃、能够吃蘑菇。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<input type="button" id="mybtn" value="click me" />
<script type="text/javascript">
var player = {
name: "马里奥",
high: 1.2,
clothing: "背带裤",
wear: "red hat",
jump: function(){
alert("跳起");
},
eat: function(){
alert("吃了一个毒蘑菇");
}
};
document.write(player.name+"
");
document.write(player.high+"
");
document.write(player.clothing+"
");
document.write(player.wear+"
");
player.jump();
script>
body>
html>