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 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
javascript 闭包详解
Jul 02 Javascript
jQuery使用$.ajax进行即时验证的方法
Dec 08 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 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
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
初识laravel5
2015/03/02 PHP
分享PHP守护进程类
2015/12/30 PHP
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
javascript每日必学之继承
2016/02/23 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python求列表交集的方法汇总
2014/11/10 Python
Python脚本处理空格的方法
2016/08/08 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
文秘专业自荐信
2013/10/14 职场文书
护士自荐信怎么写
2013/10/18 职场文书
实习自我鉴定范文
2013/10/30 职场文书
招商经理岗位职责
2013/11/16 职场文书
会议接待欢迎词
2014/01/12 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
2014年维稳工作总结
2014/11/18 职场文书
前台文员岗位职责
2015/02/04 职场文书
公司年夜饭通知
2015/04/25 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书