Javascript 使用function定义构造函数

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 = "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定义法。

使用构造函数创建JavaScript对象 -- JavaScript教程

构造函数法创建JavaScript对象

//定义构造函数
function Site(url, name)
{
this.url = "www.jb51.net";
this.name ="我们";
}

//使用构造函数产生一个JavaScript对象的实例
var mysite = new Site();
alert(mysite.url);

直接法创建JavaScript对象

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+"岁了!")}
site.age();

<!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 = "www.jb51.net";
this.name ="梦之都";
}

//使用构造函数产生一个JavaScript对象的实例
var mysite = new Site();
alert(mysite.url);
</script>

<p>直接法创建JavaScript对象</p>
<script type="text/javascript">
var site = {};
site.URL = "www.jb51.net";
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>

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

    什么是面向对象?面向对象是一种思想!(废话). 面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下来将为大家讲解在JS中面向对象的实现.   工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象.其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可. function createBlo

  • JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)

    说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象JS基础讲解,工厂模式.构造函数模式.原型模式.混合模式.动态原型模式>,接下来讲一般通过那些方法完成JavaScript的继承. 原型链 JavaScript中实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实例即可,即"子类型.prototype = new 父类型();&qu

  • Javascript中构造函数要注意的一些坑

    Javascript中构造函数要注意的一些坑

    前言 最近在家看书:<你不知道的Javascript>,看到构造函数调用时会绑定this,就顺便打开控制台输了一些代码,详细测试了一下. 构造函数简单的讲,即定义出来专供new 式调用的函数. 如: function A(b) { this.b = b || 'bbb'; } 然后你就可以通过new ,来构建一个 A 的实例: var a = new A('B') 但是,一个首要的坑是,构造函数与一个普通函数并无不同,如果你故意不使用new,或忘记用new,都会得到奇怪的错误: var aa

  • JS特殊函数(Function()构造函数、函数直接量)区别介绍

    函数定义 函数是由这样的方式进行声明的:关键字 function.函数名.一组参数,以及置于括号中的待执行代码. 函数的构造语法有这三种: Js代码 复制代码 代码如下: 1.function functionName(arg0, arg1, ... argN) { statements }//function语句 2.var function_name = new Function(arg1, arg2, ..., argN, function_body);//Function()构造函数 3

  • JavaScript构造函数详解

    JavaScript构造函数详解

    构造函数就是初始化一个实例对象,对象的prototype属性是继承一个实例对象. 构造函数注意事项: 1.默认函数首字母大写 2.构造函数并没有显示返回任何东西.new 操作符会自动创建给定的类型并返回他们,当调用构造函数时,new会自动创建this对象,且类型就是构造函数类型. 3.也可以在构造函数中显示调用return.如果返回的值是一个对象,它会代替新创建的对象实例返回.如果返回的值是一个原始类型,它会被忽略,新创建的实例会被返回. function Person( name){ this

  • Javascript的构造函数和constructor属性

    Javascript的构造函数和constructor属性

    例如,在Chrome下调试如下程序,很清楚的展示了这点: 然而事情并不是这么简单.再看下面的代码: 很显然,这个时候obj的constructor已经不再是创建它的函数,注意到obj.name也是undefined,因此修改构造函数的prototype的contructor并不会影响构造函数所产生的对象.真正的原因是:一个对象的constructor是它的构造函数的prototype.constructor,而每一个函数都有一个prototype,默认情况下,这个prototype有一个cons

  • JavaScript中的普通函数与构造函数比较

    问题 什么是构造函数? 构造函数与普通函数区别是什么? 用new关键字的时候到底做了什么? 构造函数有返回值怎么办? 构造函数能当普通函数调用吗? 以下是我的一些理解,理解错误的地方恳请大家帮忙指正,谢谢! this this永远指向当前正在被执行的函数或方法的owner.例如: function test(){ console.log(this); } test(); //Window {top: Window, window: Window, location: Location, exte

  • JS中的构造函数详细解析

    在JavaScript中,任何合法的函数都可以作为对象的构造函数,这既包括系统内置函数,也包括用户自己定义的函数.一旦函数被作为构造函数执行,它内部的this属性将引用函数本身. 通常来说,构造函数没有返回值,它们只是初始化由this指针传递进来的对象,并且什么也不返回.如果一个函数有返回值,被返回的对象就成了new表达式的值.从形式上看,一个函数被作为构造函数还是普通函数执行的唯一区别,是否用new运算符. 上面的描述事实上有着更为精确的含义,这要把函数如果有返回值的情况分为函数的返回值是引用

  • js面向对象设计用{}好还是function(){}好(构造函数)

    在网上看了很多JavaScript的项目, 用到对象都是采用{}的形式: 例如jQuery, TinyMCE等都是形如: 复制代码 代码如下: var Dialog = { int : function() { .... }, insert : function() { .... }, pop : function() { .... } }; //调用就是: Dialog.init(); 而我自己一直使用function闭包的方式, 感觉使用内部私有成员(函数,变量)更方便: 复制代码 代码如下

  • 深入理解javascript构造函数和原型对象

    深入理解javascript构造函数和原型对象

    常用的几种对象创建模式 使用new关键字创建 最基础的对象创建方式,无非就是和其他多数语言一样说的一样:没对象,你new一个呀! var gf = new Object(); gf.name = "tangwei"; gf.bar = "c++"; gf.sayWhat = function() { console.log(this.name + "said:love you forever"); } 使用字面量创建 这样似乎妥妥的了,但是宅寂的

随机推荐