JavaScript创建类/对象的几种方式概述及实例


Posted in Javascript onMay 06, 2013

在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的。

JS对象是一种复合类型,它允许你通过变量名存储和访问,换一种思路,对象是一个无序的属性集合,集合中的每一项都由名称和值组成(听起来是不是很像我们常听说的HASH表、字典、健/值对?),而其中的值类型可能是内置类型(如number,string),也可能是对象。
一、由一对大括号括起来

var emptyObj = {}; 
var myObj = 
{ 
'id': 1, //属性名用引号括起来,属性间由逗号隔开 
'name': 'myName' 
}; 
//var m = new myObj(); //不支持

 不知你注意到对象都是用 var 声明的没有,像上面的代码,就只是简单的声明一个对象,它只有一份拷贝,你不能像实例化类对象一样对它采用new操作,像上面代码的注释部分。这样就极大的限制了对象的重用,除非你建立的对象只需要一份拷贝,否则考虑用其他方法建立对象。

下面一起看看如何访问对象的属性和方法。

var myObj = 
{ 
'id': 1, 
'fun': function() { 
document.writeln(this.id + '-' + this.name);//以"对象.属性"方式访问 
}, 
'name': 'myObj', 
'fun1': function() { 
document.writeln(this['id'] + '+' + this['name']);//以集合方式访问 
} 
}; 
myObj.fun(); 
myObj.fun1(); 
// 结果 
// 1-myObj 1+myObj

二、用 function 关键字模拟 class
在 function 中用 this 引用当前对象,通过对属性的赋值来声明属性。如果用var声明变量,则该变量为局部变量,只允许在类定义中调用。
function myClass() { 
this.id = 5; 
this.name = 'myclass'; 
this.getName = function() { 
return this.name; 
} 
} 
var my = new myClass(); 
alert(my.id); 
alert(my.getName()); 
// 结果 
// 5 
// myclass

三、在函数体中创建一个对象,声明其属性再返回
在函数体中创建对象可利用第一点的方法,或先 new Object(); 再为各属性赋值。
不过用这种方式创建的对象在VS2008 SP1中是没有智能提示的。
function myClass() { 
var obj = 
{ 
'id':2, 
'name':'myclass' 
}; 
return obj; 
} 
function _myClass() { 
var obj = new Object(); 
obj.id = 1; 
obj.name = '_myclass'; 
return obj; 
} 
var my = new myClass(); 
var _my = new _myClass(); 
alert(my.id); 
alert(my.name); 
alert(_my.id); 
alert(_my.name); 
// 结果 
// 2 
// myclass 
// 1 
// _myclass
Javascript 相关文章推荐
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
jQuery Ajax全解析
Feb 13 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
浅析js实现网页截图的两种方式
Nov 01 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 #Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 #Javascript
jQuery动画animate方法使用介绍
May 06 #Javascript
JS修改css样式style浅谈
May 06 #Javascript
用JavaScript修改CSS属性的代码
May 06 #Javascript
Jquery带搜索框的下拉菜单
May 06 #Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 #Javascript
You might like
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
php中的登陆login实例代码
2016/06/20 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
Javascript模拟实现new原理解析
2020/03/03 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python操作SQLite数据库的方法详解
2017/06/16 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
对Python3 序列解包详解
2019/02/16 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
Python流程控制语句的深入讲解
2020/06/15 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
个人简历自荐信
2013/12/05 职场文书
房地产销售经理岗位职责
2014/01/01 职场文书
初中数学教学反思
2014/01/16 职场文书
物理研修随笔感言
2014/02/14 职场文书
三八妇女节标语
2014/10/09 职场文书
部队2014年终工作总结
2014/11/27 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
用人单位聘用意向书
2015/05/11 职场文书
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python
python创建字典及相关管理操作
2022/04/13 Python
python数字图像处理:图像的绘制
2022/06/28 Python
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL