5.2 自定义对象的创建
视频讲解
创建自定义对象主要有3种方法：一种是直接创建自定义对象，另一种是通过自定义构造函数来创建，还有一种是通过系统内置的Object对象创建。
5.2.1 直接创建自定义对象
直接创建自定义对象的语法格式如下：
var 对象名 = {属性名1:属性值1,属性名2:属性值2,属性名3:属性值3...}
由语法格式可以看出，直接创建自定义对象时，所有属性都放在大括号中，属性之间用逗号分隔，每个属性都由属性名和属性值两部分组成，属性名和属性值之间用冒号隔开。
例如，创建一个学生对象student，并设置3个属性，分别为name、sex和age，然后输出这3个属性的值，代码如下：
01 var student = { //创建student对象
02 name:"张三",
03 sex:"男",
04 age:25
05 }
06 document.write("姓名："+student.name+"<br>"); //输出name属性值
07 document.write("性别："+student.sex+"<br>"); //输出sex属性值
08 document.write("年龄："+student.age+"<br>"); //输出age属性值
运行结果如图5.3所示。
图5.3 创建学生对象并输出属性值
另外，还可以使用数组的方式对属性值进行输出，代码如下：
01 var student = { //创建student对象
02 name:"张三",
03 sex:"男",
04 age:25
05 }
06 document.write("姓名："+student['name']+"<br>"); //输出name属性值
07 document.write("性别："+student['sex']+"<br>"); //输出sex属性值
08 document.write("年龄："+student['age']+"<br>"); //输出age属性值
5.2.2 通过自定义构造函数创建对象
虽然直接创建自定义对象很方便也很直观，但是如果要创建多个相同的对象，使用这种方法就很烦琐。在JavaScript中可以自定义构造函数，通过调用自定义的构造函数可以创建并初始化一个新的对象。与普通函数不同，调用构造函数必须要使用new运算符。构造函数也可以和普通函数一样使用参数，其参数通常用于初始化新对象。在构造函数的函数体内通过this关键字初始化对象的属性与方法。
例如，要创建一个学生对象student，可以定义一个名称为Student的构造函数，代码如下：
01 function Student(name,sex,age){ //定义构造函数
02 this.name = name; //初始化对象的name属性
03 this.sex = sex; //初始化对象的sex属性
04 this.age = age; //初始化对象的age属性
05 }
上述代码中，在构造函数内部对name、sex和age 3个属性进行了初始化，其中，this关键字表示对对象自己属性、方法的引用。
利用该函数，可以用new运算符创建一个新对象，代码如下：
var student1 = new Student("张三","男",25); //创建对象实例
上述代码创建了一个名为student1的新对象，新对象student1称为对象student的实例。使用new运算符创建一个对象实例后，JavaScript会接着自动调用所使用的构造函数，执行构造函数中的程序。
另外，还可以创建多个student对象的实例，每个实例都是独立的。代码如下：
01 var student2 = new Student("李四","女",23); //创建其他对象实例
02 var student3 = new Student("王五","男",28); //创建其他对象实例
【例5.01】应用构造函数创建一个球员对象，定义构造函数Player()，在函数中应用this关键字初始化对象中的属性，然后创建一个对象实例，最后输出对象中的属性值，即输出球员的身高、体重、运动项目、所属球队和专业特点。程序代码如下：（实例位置：资源包\源码\05\5.01）
01 <h1 style="font-size:24px;">梅西</h1>
02 <script type="text/javascript">
03 function Player(height,weight,sport,team,character){
04 this.height = height; //对象的height属性
05 this.weight = weight; //对象的weight属性
06 this.sport = sport; //对象的sport属性
07 this.team = team; //对象的team属性
08 this.character = character; //对象的character属性
09 }
10 //创建一个新对象player1
11 var player1 = new Player("170cm","67kg","足球","巴塞罗那","技术出色，意识好");
12 document.write("球员身高："+player1.height+"<br>"); //输出height属性值
13 document.write("球员体重："+player1.weight+"<br>"); //输出weight属性值
14 document.write("运动项目："+player1.sport+"<br>"); //输出sport属性值
15 document.write("所属球队："+player1.team+"<br>"); //输出team属性值
16 document.write("专业特点："+player1.character+"<br>"); //输出character属性值
17 </script>
运行结果如图5.4所示。
图5.4 输出球员对象的属性值
对象不但可以拥有属性，还可以拥有方法。在定义构造函数时，也可以定义对象的方法。与对象的属性一样，在构造函数中也需要使用this关键字来初始化对象的方法。例如，在student对象中定义3个方法showName()、showAge()和showSex()，代码如下：
01 function Student(name,sex,age){ //定义构造函数
02 this.name = name; //初始化对象的属性
03 this.sex = sex; //初始化对象的属性
04 this.age = age; //初始化对象的属性
05 this.showName = showName; //初始化对象的方法
06 this.showSex = showSex; //初始化对象的方法
07 this.showAge = showAge; //初始化对象的方法
08 }
09 function showName(){ //定义showName()方法
10 alert(this.name); //输出name属性值
11 }
12 function showSex(){ //定义showSex()方法
13 alert(this.sex); //输出sex属性值
14 }
15 function showAge(){ //定义showAge()方法
16 alert(this.age); //输出age属性值
17 }
另外，也可以在构造函数中直接使用表达式来定义方法，代码如下：
01 function Student(name,sex,age){ //定义构造函数
02 this.name = name; //初始化对象的属性
03 this.sex = sex; //初始化对象的属性
04 this.age = age; //初始化对象的属性
05 this.showName=function(){ //应用表达式定义showName()方法
06 alert(this.name); //输出name属性值
07 };
08 this.showSex=function(){ //应用表达式定义showSex()方法
09 alert(this.sex); //输出sex属性值
10 };
11 this.showAge=function(){ //应用表达式定义showAge()方法
12 alert(this.age); //输出age属性值
13 };
14 }
【例5.02】应用构造函数创建一个演员对象Actor，在构造函数中定义对象的属性和方法，通过创建的对象实例调用对象中的方法，输出演员的中文名、代表作品以及主要成就。程序代码如下：（实例位置：资源包\源码\05\5.02）
01 function Actor(name,work,achievement){
02 this.name = name; //对象的name属性
03 this.work = work; //对象的work属性
04 this.achievement = achievement; //对象的achievement属性
05 this.introduction = function(){ //定义introduction()方法
06 document.write("中文名："+this.name); //输出name属性值
07 document.write("<br>代表作品："+this.work); //输出work属性值
08 document.write("<br>主要成就："+this.achievement); //输出achievement属性值
09 }
10 }
11 var Actor1 = new Actor("威尔·史密斯","《独立日》、《黑衣人》",
"奥斯卡金像奖最佳男主角提名"); //创建对象Actor1
12 Actor1.introduction(); //调用introduction()方法
运行结果如图5.5所示。
图5.5 调用对象中的方法输出演员简介
调用构造函数创建对象需要注意一个问题。如果构造函数中定义了多个属性和方法，那么在每次创建对象实例时都会为该对象分配相同的属性和方法，这样会增加对内存的需求，这时可以通过prototype属性来解决这个问题。
prototype属性是JavaScript中所有函数都有的一个属性。该属性可以向对象中添加属性或方法。
语法如下：
object.prototype.name=value
参数说明。
object：构造函数名。
name：要添加的属性名或方法名。
value：添加属性的值或执行方法的函数。
例如，在student对象中应用prototype属性向对象中添加一个show()方法，通过调用show()方法输出对象中3个属性的值。代码如下：
01 function Student(name,sex,age){ //定义构造函数
02 this.name = name; //初始化对象的属性
03 this.sex = sex; //初始化对象的属性
04 this.age = age; //初始化对象的属性
05 }
06 Student.prototype.show=function(){ //添加show()方法
07 alert("姓名："+this.name+"\n性别："+this.sex+"\n年龄："+this.age);
08 }
09 var student1=new Student("张三","男",25); //创建对象实例
10 student1.show(); //调用对象的show()方法
运行结果如图5.6所示。
图5.6 输出3个属性值
【例5.03】应用构造函数创建一个圆的对象Circle，定义构造函数Circle()，然后应用prototype属性向对象中添加属性和方法，通过调用方法实现计算圆的周长和面积的功能。程序代码如下：（实例位置：资源包\源码\05\5.03）
01 function Circle(r){
02 this.r=r; //设置对象的r属性
03 }
04 Circle.prototype.pi=3.14; //添加对象的pi属性
05 Circle.prototype.circumference=function(){ //添加计算圆周长的circumference()方法
06 return 2*this.pi*this.r; //返回圆的周长
07 }
08 Circle.prototype.area=function(){ //添加计算圆面积的area()方法
09 return this.pi*this.r*this.r; //返回圆的面积
10 }
11 var c=new Circle(10); //创建一个新对象c
12 document.write("圆的半径为"+c.r+"<br>"); //输出圆的半径
13 document.write("圆的周长为"+parseInt(c.circumference())+"<br>"); //输出圆的周长
14 document.write("圆的面积为"+parseInt(c.area())); //输出圆的面积
运行结果如图5.7所示。
图5.7 计算圆的周长和面积
5.2.3 通过Object对象创建自定义对象
Object对象是JavaScript中的内部对象，它提供了对象的最基本功能，这些功能构成了所有其他对象的基础。Object对象提供了创建自定义对象的简单方式，使用这种方式不需要再定义构造函数。可以在程序运行时为JavaScript对象随意添加属性，因此使用Object对象能很容易地创建自定义对象。
创建Object对象的语法如下：
obj = new Object([value])
参数说明。
obj：必选项。要赋值为Object对象的变量名。
value：可选项。任意一种基本数据类型（Number、Boolean或String）。如果value为一个对象，返回不做改动的该对象。如果value为null、undefined，或者没有给出，则产生没有内容的对象。
使用Object对象可以创建一个没有任何属性的空对象。如果要设置对象的属性，只需要将一个值赋给对象的新属性即可。例如，使用Object对象创建一个自定义对象student，并设置对象的属性，然后对属性值进行输出，代码如下：
01 var student = new Object(); //创建一个空对象
02 student.name = "王五"; //设置对象的name属性
03 student.sex = "男"; //设置对象的sex属性
04 student.age = 28; //设置对象的age属性
05 document.write("姓名："+student.name+"<br>"); //输出对象的name属性值
06 document.write("性别："+student.sex+"<br>"); //输出对象的sex属性值
07 document.write("年龄："+student.age+"<br>"); //输出对象的age属性值
运行结果如图5.8所示。
图5.8 创建Object对象并输出属性值
说明
一旦通过给属性赋值创建了该属性，就可以在任何时候修改这个属性的值，只需要赋给它新值即可。
在使用Object对象创建自定义对象时，也可以定义对象的方法。例如，在student对象中定义方法show()，然后对方法进行调用，代码如下：
01 var student = new Object(); //创建一个空对象
02 student.name = "张三"; //设置对象的name属性
03 student.sex = "男"; //设置对象的sex属性
04 student.age = 25; //设置对象的age属性
05 student.show = function(){ //定义对象的方法
06 //输出属性的值
07 alert("姓名："+student.name+"\n性别："+student.sex+"\n年龄："+student.age);
08 };
09 student.show(); //调用对象的方法
运行结果如图5.9所示。
图5.9 调用对象的方法
如果在创建Object对象时没有指定参数，JavaScript将会创建一个Object实例，但该实例并没有具体指定为哪种对象类型，这种方法多用于创建一个自定义对象。如果在创建Object对象时指定了参数，可以直接将value参数的值转换为相应的对象。如以下代码就是通过Object对象创建了一个字符串对象。
var myObj = new Object("你好JavaScript"); //创建一个字符串对象
【例5.04】使用Object对象创建自定义对象book，在book对象中定义方法getBookInfo()，在方法中传递3个参数，然后对这个方法进行调用，输出图书信息。程序代码如下：（实例位置：资源包\源码\05\5.04）
01 var book = new Object(); //创建一个空对象
02 book.getBookInfo = getBookInfo; //定义对象的方法
03 function getBookInfo(name,type,price){
04 //输出图书的书名、类型及价格
05 document.write("书名："+name+"<br>类型："+type+"<br>价格："+price);
06 }
07 book.getBookInfo("JavaScript入门经典","JavaScript","80"); //调用对象的方法
运行结果如图5.10所示。
图5.10 创建图书对象并调用对象中的方法