JavaScript 创建对象


Posted in Javascript onJuly 17, 2009

第一种:JSON方式/对象直接量
格式:
var 对象名 = {
变量1: 变量1的值,
变量1: 变量1的值,
……,
函数1: function() {
函数体
},
函数2: function() {
函数体
}//Note:最后的逗号要去除为了和IE兼容。
};
说明:
(1) 大括号内直接填写变量或者函数;
(2) 对象的内容与值以冒号分隔,成对出现;
(3) 包含的变量或者函数之间以逗号分隔;
(4) 函数需要写在function(){}的大括号之内。
例子:
var 对象名 = {
name: “Vicky”,
age: 26,
eat: function() {
alert(‘I wanna eat meat');
},
sleep: function() {
alert(‘I wanna sleep');
}
};
注释:类似的方式也叫做匿名类
匿名类举例:
{
index: '//',
reg: new RegExp('^//.*$'),
css: "comment"
}
上面的方式创建了类,只是没赋给一个变量而已。
第二种:function方式
格式:
function data() {
this.变量1=变量1的值;
this.变量2=变量2的值;
……;
this.函数1= function() {
函数体
};
this.函数2= function() {
函数体
};
}
说明:
(1) 其内的变量或者函数前必需写上this关键字;
(2) 对象的内容与值以等号分隔,成对出现;
(3) 包含的变量或者函数之间以分号分隔。
(4) 函数需要写在function(){}的大括号之内。
例子:
function data() {
this.name=“Vicky””;
this.age=26;
this.eat=function() {
alert(‘I wanna eat meat');
};
this.sleep=function() {
alert(‘I wanna sleep');
};
}
第三种:原型方式
格式:
var 对象名 = {};
对象名.prototype.变量1=变量1的值;
对象名.prototype.变量2=变量2的值;
……;
对象名.prototype.函数1= function() {
函数体
};
对象名.prototype.函数2= function() {
函数体
};
……;
说明:
(1) 初始对象体内可以不定义任何东西;
(2) 在要定义的变量前加“对象名.prototype.”的格式;
(3) 对象的内容与值以等号分隔,成对出现;
(4) 包含的变量或者函数之间以分号分隔,也可以省去分号。
(5) 函数需要写在function(){}的大括号之内。
例子:
var data = {};
data.prototype. name ="Vicky”;
data.prototype. age =20;
data.prototype. eat = function() {
alert(‘I wanna eat meat');
};
data.prototype. sleep= function() {
alert(‘I wanna sleep');
};
第四种:create方式
该方式利用了Prototype JavaScript组件库。
格式:
var 对象名 = Class.create();
Object.extend(对象名.prototype, {
变量1: 变量1的值,
变量1: 变量1的值,
……,
函数1: function() {
函数体
},
函数2: function() {
函数体
},
……
});
说明:
(1) 对象的创建使用了Prototype库中的Class.create()函数;
(2) 对象的内容使用Prototype库中的Object.extend()函数来扩展;
(3) 被扩展的对象在传入Object.extend函数时一定要带上prototype,
(4) 扩展内容被大括号包含,其内与JSON方式的定义格式完全相同。
例子:
var data = Class.create();
Object.extend(dta.prototype, {
name: "Vicky",
age: 20,
eat: function() {
alert(‘I wanna eat meat');
},
sleep: function() {
alert(‘I wanna sleep');
}
});
其实,JS对象的定义还有其它的方式,你也可以用上面4种进行组合定义,这显出了JS作为动态语言的自由性。
JS对象的创建正规方法如下:
var d1 = new Data();
JS对象变量的引用方式有两种:
(1) 点号方式引用,如,data.name。
(2) 数组方式引用,如,data[‘name']。

Javascript 相关文章推荐
document.all与WEB标准
May 13 Javascript
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
JQuery 获得绝对,相对位置的坐标方法
Feb 09 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
老生常谈的跨域处理
Jan 11 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
html实现随机点名器的示例代码
Apr 02 Javascript
prototype 学习笔记整理
Jul 17 #Javascript
表单元素事件 (Form Element Events)
Jul 17 #Javascript
优化 JavaScript 代码的方法小结
Jul 16 #Javascript
Javascript 事件流和事件绑定
Jul 16 #Javascript
js 对象是否存在判断
Jul 15 #Javascript
js 实现无缝滚动 兼容IE和FF
Jul 15 #Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 #Javascript
You might like
详解:――如何将图片储存在数据库里
2006/12/05 PHP
Smarty模板快速入门
2007/01/04 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
treepanel动态加载数据实现代码
2012/12/15 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
python+os根据文件名自动生成文本
2019/03/21 Python
详解python中的模块及包导入
2019/08/30 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
自荐信要包含哪些内容
2013/11/06 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
2014年三万活动总结
2014/04/26 职场文书
防灾减灾活动总结
2014/08/30 职场文书
出差报告格式模板
2014/11/06 职场文书
干部个人考察材料
2014/12/24 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
大国崛起日本观后感
2015/06/02 职场文书