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 相关文章推荐
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 Javascript
webpack4+react多页面架构的实现
Oct 25 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
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
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
npm qs模块使用详解
2020/02/07 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
如何运行带参数的python脚本
2019/11/15 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
Python Merge函数原理及用法解析
2020/09/16 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
python 实现简易的记事本
2020/11/30 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
演讲主持词
2014/03/18 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
村级个人对照检查材料
2014/08/22 职场文书
个人自查自纠材料
2014/10/14 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
与死神共舞观后感
2015/06/15 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书