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 类方法定义还是有点区别
Apr 15 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
完善的jquery处理机制
Feb 21 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
JavaScript如何对图片进行黑白化
Apr 10 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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
PHP程序员不应该忽略的3点
2015/10/09 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
python使用Geany编辑器配置方法
2020/02/21 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
大学生实习思想汇报
2014/01/12 职场文书
成语的广告词
2014/03/19 职场文书
双创工作实施方案
2014/03/26 职场文书
公司业务员管理制度
2015/08/05 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
Mysql案例刨析事务隔离级别
2021/09/25 MySQL