脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → function 构造函数

Javascript 使用function定义构造函数

 更新时间：2010年02月27日 12:20:37   作者：  
Javascript并不像Java、C#等语言那样支持真正的类。但是在js中可以定义伪类。做到这一点的工具就是构造函数和原型对象。首先介绍js中的构造函数。
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定义法。

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
您可能感兴趣的文章:

相关文章

  • 学习JavaScript设计模式之观察者模式

    学习JavaScript设计模式之观察者模式

    这篇文章主要为大家介绍了JavaScript设计模式中的观察者模式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 微信小程序天气预报功能实现(支持自动定位,附源码)

    微信小程序天气预报功能实现(支持自动定位,附源码)

    对于一个经常出门在外的人,关注天气是至关重要的,下面这篇文章主要给大家介绍了关于微信小程序天气预报功能实现的相关资料,文中通过实例代码介绍的非常详细,支持自动定位,需要的朋友可以参考下
    2022-04-04
  • document.open() 与 document.write()的区别

    document.open() 与 document.write()的区别

    document.open() 与 document.write()的区别...
    2007-08-08
  • js不间断滚动的简单实现

    js不间断滚动的简单实现

    下面小编就为大家带来一篇js不间断滚动的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 利用JS实现窗口最大化和最小化效果

    利用JS实现窗口最大化和最小化效果

    在现代 Web 开发中,JavaScript 提供了多种方法来与浏览器窗口进行交互,包括最大化和最小化浏览器窗口,虽然浏览器通常会限制对窗口尺寸的直接控制,但我们依然可以实现一些常见的行为,本文将探讨如何使用 JavaScript 实现窗口的最大化和最小化效果
    2024-12-12
  • js获取当前页面路径示例讲解

    js获取当前页面路径示例讲解

    本篇文章主要是对js获取当前页面路径的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • javascript简单实现表格行间隔显示颜色并高亮显示

    javascript简单实现表格行间隔显示颜色并高亮显示

    表格行间隔显示颜色并实现高亮显示，这种效果大家都有见到过吧，下面就为大家详细介绍下,需要的朋友可不要错过
    2013-11-11
  • javascript实现摄像头拍照预览

    javascript实现摄像头拍照预览

    这篇文章主要为大家详细介绍了javascript实现摄像头拍照预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-09-09
  • javascript 子窗体父窗体相互传值方法

    javascript 子窗体父窗体相互传值方法

    javascript 子窗体父窗体相互传值方法,一般都是用window.open函数，下面脚本之家给出具体的代码。
    2010-05-05
  • 微信小程序实现页面浮动导航

    微信小程序实现页面浮动导航

    这篇文章主要为大家详细介绍了微信小程序实现页面浮动导航，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01

最新评论