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 相关文章推荐
实现只能输入数字的input不用replace方法
Sep 12 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 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
PHP学习之数组值的操作
2011/04/17 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
详解react-redux插件入门
2018/04/19 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
微信小程序实现滑动操作代码
2020/04/23 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
答题辅助python代码实现
2018/01/16 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
python中for用来遍历range函数的方法
2018/06/08 Python
python实现简易内存监控
2018/06/21 Python
python 拼接文件路径的方法
2018/10/23 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
Python timeit模块原理及使用方法
2020/10/10 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
小学端午节活动方案
2014/03/13 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
驳回起诉裁定书
2015/05/19 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers