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 相关文章推荐
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 Javascript
原生js实现轮播图特效
May 04 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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
Zend Guard一些常见问题解答
2008/09/11 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
python 快速排序代码
2009/11/23 Python
wxPython窗口的继承机制实例分析
2014/09/28 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
django的ORM操作 增加和查询
2019/07/26 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
浅析Python 多行匹配模式
2020/07/24 Python
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
秘书岗位职责
2013/11/18 职场文书
法律顾问服务方案
2014/05/15 职场文书
服务承诺书怎么写
2014/05/24 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
三严三实对照检查材料
2014/09/22 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js