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 相关文章推荐
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
微信小程序实现购物车功能
Nov 18 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 如何向 MySQL 发送数据
2006/10/09 PHP
PHP5 面向对象程序设计
2008/02/13 PHP
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
php 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
仿微博字符限制效果实现代码
2012/04/20 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
Python入门篇之正则表达式
2014/10/20 Python
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
详解Python循环作用域与闭包
2019/03/21 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
阿巴庭院:Abba Patio
2019/06/18 全球购物
全神贯注教学反思
2014/02/03 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
星级党支部申报材料
2014/05/31 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
机关作风建设整改方案
2014/10/27 职场文书
财产分割协议书范本
2014/11/03 职场文书
物业公司管理制度
2015/08/05 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers