Javascript 使用function定义构造函数
作者：bea
Javascript中创建对象的语法是在new运算符的后面跟着一个函数的调用。如 代码如下: var obj = new Object(); var date = new Date(); 运算符new首先创建一个新的没有任何属性的对象，然后调用该函数，把新的对象作为this关键字的值传递。 代码如下: var date = new Date()的伪代码的实现就是 var obj = {}; var date = Date.call(obj); 构造函
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 -- new的关键词(JavaScript关键词)
objectname -- 构造函数名称
示例
代码如下:
//定义构造函数
function Site(url, name)
{
this.url = "";
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 = "";
site.name = "";
site.englishname = "";
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方法会打印出 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>
<script type="text/javascript">
//定义构造函数
function Site(url, name)
{
this.url = "";
this.name ="";
}
//使用构造函数产生一个JavaScript对象的实例
var mysite = new Site();
alert(mysite.url);
</script>
<p>直接法创建JavaScript对象</p>
<script type="text/javascript">
var site = {};
site.URL = "";
site.name = "";
site.englishname = "";
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+"岁了!")}
site.age();
</script>
<div style="margin-top:5em"><form method="post" action="#"><input type="button" name="dreamduinput" id="dreamduinput" style="border-width: 1px;color: #fff;background-color: #4289cb;" value="----上面的内容就对应着下面的代码,修改代码,并点我,查看一下效果吧!----" onClick="RunCode(dreamdutest)">
<textarea name="dreamdutest" id="dreamdutest" rows="20" cols="120"><!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对象</title>
</head>
<body>
<script type="text/javascript">
//定义构造函数
function Site(url, name)
{
this.url = "";
this.name ="梦之都";
}
//使用构造函数产生一个JavaScript对象的实例
var mysite = new Site();
alert(mysite.url);
</script>
<p>直接法创建JavaScript对象</p>
<script type="text/javascript">
var site = {};
site.URL = "";
site.name = "梦之都";
site.englishname = "dreamdu";
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+"岁了!")}
site.age();
</script>
</body>
</html></textarea></form></div>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
代码如下:
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 -- new的关键词(JavaScript关键词)
objectname -- 构造函数名称
示例
代码如下:
//定义构造函数
function Site(url, name)
{
this.url = "";
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 = "";
site.name = "";
site.englishname = "";
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方法会打印出 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>
<script type="text/javascript">
//定义构造函数
function Site(url, name)
{
this.url = "";
this.name ="";
}
//使用构造函数产生一个JavaScript对象的实例
var mysite = new Site();
alert(mysite.url);
</script>
<p>直接法创建JavaScript对象</p>
<script type="text/javascript">
var site = {};
site.URL = "";
site.name = "";
site.englishname = "";
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+"岁了!")}
site.age();
</script>
<div style="margin-top:5em"><form method="post" action="#"><input type="button" name="dreamduinput" id="dreamduinput" style="border-width: 1px;color: #fff;background-color: #4289cb;" value="----上面的内容就对应着下面的代码,修改代码,并点我,查看一下效果吧!----" onClick="RunCode(dreamdutest)">
<textarea name="dreamdutest" id="dreamdutest" rows="20" cols="120"><!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对象</title>
</head>
<body>
<script type="text/javascript">
//定义构造函数
function Site(url, name)
{
this.url = "";
this.name ="梦之都";
}
//使用构造函数产生一个JavaScript对象的实例
var mysite = new Site();
alert(mysite.url);
</script>
<p>直接法创建JavaScript对象</p>
<script type="text/javascript">
var site = {};
site.URL = "";
site.name = "梦之都";
site.englishname = "dreamdu";
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+"岁了!")}
site.age();
</script>
</body>
</html></textarea></form></div>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- jQuery对象和DOM对象的相互转化实现代码
- Javascript 自定义类型方法小结
- Javascript Cookie读写删除操作的函数
- 28个JS验证函数收集
- 用js脚本控制asp.net下treeview的NodeCheck的实现代码
- javascript 静态对象和构造函数的使用和公私问题
- 新老版本juqery获取radio对象的方法
- 几个比较经典常用的jQuery小技巧
- 基于JQuery的密码强度验证代码
- Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)
- 基于jquery.Jcrop的头像编辑器
- IE event.srcElement和FF event.target 功能比较
- Javascript 判断客户端浏览器类型代码
- 在chrome中window.onload事件的一些问题
- 仅用[]()+!等符号就足以实现几乎任意Javascript代码
- Javascript 网页水印(非图片水印)实现代码
- 使用js获取QueryString的方法小结
- js实现的八点拖动修改div大小的代码
- JavaScript 面向对象代码实践