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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
小程序跳转H5页面的方法步骤
Mar 06 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 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生成Gif图片验证码
2013/10/27 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
python操作yaml说明
2020/04/08 Python
Python几种常见算法汇总
2020/06/02 Python
Python如何将模块打包并发布
2020/08/30 Python
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
初中化学教学反思
2014/01/23 职场文书
干部下基层实施方案
2014/03/14 职场文书
小学生春游活动方案
2014/08/20 职场文书
男方婚礼答谢词
2015/01/20 职场文书
公司捐书倡议书
2015/04/27 职场文书
信用卡工作证明范本
2015/06/19 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP