|
在 JavaScript 中,对象分为两类:系统内置对象 和 自定义对象。
在 JavaScript 中,有许多系统内置的对象,比如 Date对象,Math对象,Function对象,Array对象等等。
JavaScript 为每个内置对象(除 Math 对象外)都提供一个构造函数,而正是通过 new 运算符调用构造函数来创建相应的对象。构造函数可以在创建对象时初始化对象,让新的对象在创建后具有构造函数所提供的属性,方法;构造函数就如同一个模板,对象的属性和方法就已经放在这个模板中。new 的使用语法如:Our_New_Obj = new Constructor ( param1 [,param2] ... [,paramN] );
下面是创建系统自带对象的接简单示例: var myDate = new Date(); //创建一个日期对象
var my myString = new String(); //创建一个字符串对象
var myArray = new Array(1,2,3,4); //创建一个数组对象,该数组中有 4 个元素,分别为 1,2,3,4 。
下面创建自定义对象。
1. 最简单的一个创建自定义对象的方法就是使用对象直接量,用法格式为: { 属性名1:属性值1, 属性名2:属性值2, 属性名3:属性值3, ... } 实例:<script type="text/javascript" language="javascript">
<!--
var cpuinfo = {
fre:1000,
man:"intel",
type:"x86",
core:4
};
document.write("CPU 频率: ", cpuinfo.fre, "Mhz", "<br>");
document.write("CPU 厂商: ", cpuinfo.man, "<br>");
document.write("CPU 类型: ", cpuinfo.type, "<br>");
document.write("CPU 核心: ", cpuinfo.core, "个", "<br>");
-->
</script>
输出结果:CPU 频率: 1000Mhz
CPU 厂商: intel
CPU 类型: x86
CPU 核心: 4个 上面程序中,属性值是由“直接量”给出的。这是最简单的一种创建对象的一种情况,但是这个对象还没有一个方法。实际上,对象的方法就是一个函数。我们同样可以在对象中使用直接量来创建一个函数。创建的方法可以使用内置的 Function 对象来创建。Function 是一个为函数提供支持的对象,其构造函数代码为:使用该代码可以创建一个函数对象。
下面我们添加一个“方法”。在 cpuinfo 的定义的末处添加下面的一条语句:report:new Function("document.write('测试报告:这个 CPU 超频能力很不错')") 完后就可以 cpuinfo.report(); 这样调用该方法了。
当然,不一定只有内置的对象才拥有构造函数,我们也可以自定义构造函数,并通过该自定义的构造函数来创建对象。创建构造函数的方法与创建普通函数的方法类似,都是使用 function 语句。下面自定义一个构造函数:function cpuinfo()
{
this.fre = 1000;
this.man = "intel";
this.type = "x86";
this.core = 4;
} 上面,cpuinfo() 就是一个构造函数。它里面使用了关键字 this ,该关键字表示的就是对象本身,因此这里的 this 就代表了 cpuinfo() 这个构造函数,而 this.fre 就表示了 cpuinfo() 构造函数中的一个属性。
自定义了构造函数后,我们就可以用它来创建对象,比如:var mycpu1 = new cpuinfo();
var mycpu2 = new cpuinfo(); 上面,mycpu1 和 mycpu2 都是由构造函数 cpuinfo() 创建的对象。这两个对象都拥有 cpuinfo() 构造函数中所有的属性和属性值。
我们注意到,上面的自定义构造函数里的属性值都是写死的。在实际应用中,这种用法几乎不存在。为了方便和灵活的目的,自定义的构造函数需要带些参数,然后我们把我们想要的数值通过传递到函数中来,比如:function cpuinfo (_fre, _man, _type, _core)
{
this.fre = _fre;
this.man = _man;
this.type = _type;
this.core = _core;
} 如此一来,我们可以如下来创建对象:var mycpu = new cpuinfo(3200, "AMD", "x86", 8);
如果我们并没有老老实实的传递所有参数会怎么样呢?那结果是,未传递的参数在新建对象中所对应的属性值为 undefined 。
上面谈到的自定义构造函数里,只有属性和属性值,没有方法。下面将为构造函数添加一个方法。上面已经说过,对象的方法实际就是函数,不同的是我们是通过对象来调用而已。假设要创建一个报告 CPU 性能的方法,那么我们可以先创建一个 Our_Report() 函数,如:function Our_Report()
{
alert("测试报告:这个 CPU 超频能力很不错");
} 接下来,我们在 cpuinfo() 这个构造函数中定义一个方法,该方法的作用就是调用 Our_Report() 这个函数,如:function cpuinfo (_fre, _man, _type, _core)
{
this.fre = _fre;
this.man = _man;
this.type = _type;
this.core = _core;
this.report = Our_Report;
} 下面是一段完整的测试代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 构造函数 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript" language="javascript">
<!--
function Our_Report()
{
alert("测试报告:这个 CPU 超频能力很不错");
}
function cpuinfo (_fre, _man, _type, _core)
{
this.fre = _fre;
this.man = _man;
this.type = _type;
this.core = _core;
this.report = Our_Report;
}
var mycpu = new cpuinfo(3200, "AMD", "X86", 8);
document.write("CPU 频率: ", mycpu.fre, "Mhz", "<br>");
document.write("CPU 厂商: ", mycpu.man, "<br>");
document.write("CPU 类型: ", mycpu.type, "<br>");
document.write("CPU 核心: ", mycpu.core, "个", "<br>");
//引用 mycpu 对象的 report() 方法
mycpu.report();
-->
</script>
</body>
</html>
需要注意的是:report 是 cpuinfo() 构造函数定义的一个方法,该方法的作用是调用 Our_Report() 函数。在将 Our_Report() 函数赋值给 report 方法时,没有使用函数调用运算符( () )。如果使用了该运算符,那么就是将 Our_Report() 函数运行之后的结果复制给 report 方法,而不是将函数赋值给 report 方法。 |
|