JavaScript 构造函数与对象创建详解

JavaScript构造函数基础

在JavaScript中，创建对象的标准语法是在new运算符后跟随一个函数调用。例如：

 
var obj = new Object();
var date = new Date();

new运算符的执行过程首先创建一个没有任何属性的新对象，随后调用指定的函数，并将这个新创建的对象作为this关键字的值传递给该函数。

 
语句var date = new Date()的底层伪代码实现逻辑如下：
var obj = {};
var date = Date.call(obj);

构造函数的主要作用是初始化新创建的对象，并在对象投入使用前设置其属性。如果用户自定义构造函数，只需编写一个为this添加属性的函数即可。以下代码定义了一个构造函数：

 
function Rectangle(w, h)
{ 
this.width = w;
this.height = h;
} 

随后，可以使用new运算符调用该函数来创建对象的实例：

 
var rect = new Rectange(4,8);

构造函数的返回值机制

构造函数的返回值机制

JavaScript中的构造函数通常不显式返回任何值。然而，函数本身允许有返回值。如果构造函数包含返回值，则该返回值将成为new表达式的结果对象。在这种情况下，原本作为this的对象将被丢弃。

构造函数定义法语法与示例

使用构造函数定义法

语法格式

 
var object=new objectname();
var -- 用于声明对象变量
object -- 指定对象的名称
new -- JavaScript的关键字
objectname -- 构造函数的名称

示例演示

 
//定义构造函数
function Site(url, name)
{ 
this.url = "www.jb51.net";
this.name ="梦之都";
} 
//使用构造函数产生一个JavaScript对象的实例
var mysite = new Site();
alert(mysite.url);

构造函数通常用于初始化对象中的部分内容。JavaScript内部提供的一些对象通常需要通过调用构造函数的方法来生成。JavaScript函数的具体内容将在后续章节介绍。

直接定义法创建对象

直接定义法创建JavaScript对象

 
//定义对象语法
var object={};
//对象内的属性语法(属性名(property)与属性值(value)是成对出现的)
object.property=value;
//对象内的函数语法(函数名(func)与函数内容是成对出现的)
object.func=function(){...;};

var -- 声明对象变量

object -- 对象的名称

property -- 对象的属性名

func -- 对象的方法名

说明：对象可以包含若干属性（函数可视为带有括号的特殊属性），每个属性都有名称和值。名称可以是任何字符串，甚至为空。值可以是任何JavaScript类型，但不能是undefined。

使用定义法定义的对象示例

 
var site = {};
site.URL = "www.jb51.net";
site.name = "本站";
site.englishname = "jb51";
site.author = "脚本";
site.summary = "免费的网页设计教程";
site.pagescount = 100;
site.isOK = true;
site.startdate = new Date(2005, 12);
site.say = function(){alert(this.englishname+" say : hello world!")};
site.age = function(){var theage=(new Date().getFullYear())-site.startdate.getFullYear();alert(this.name+"已经"+theage+"岁了!")}

使用构造函数创建JavaScript对象示例 -- 可以尝试编辑

使用构造函数创建JavaScript对象

上述方法定义了一个site对象，并为其定义了七个属性与两个方法。

say方法会打印出jb51 say : hello world!的字符串

age方法会计算出梦之都网站的年龄

猴子提示: 注意每个属性与函数前面都要加上对象的名称，否则JavaScript无法判断它是属于那个对象的。

下面的课程将讲解直接定义法的延伸，JSON定义法。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html>     <head>         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />         <title>使用构造函数创建JavaScript对象 -- JavaScript教程</title>             </head>     <body>         <p>构造函数法创建JavaScript对象</p>                           <p>直接法创建JavaScript对象</p>                  <div style="margin-top:5em"></div> </body> </html>