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中的new的使用方法与注意事项
May 16 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
微信小程序搭建自己的Https服务器
May 02 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
多文件上载系统完整版
2006/10/09 PHP
加速XP搜索功能堪比vista
2007/03/22 PHP
php 缩略图实现函数代码
2011/06/23 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
幼儿园的门卫岗位职责
2014/04/10 职场文书
挂职学习心得体会
2014/09/09 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
python中使用redis用法详解
2022/12/24 Redis