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 相关文章推荐
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
深入浅析vue组件间事件传递
Dec 29 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
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
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
js url传值中文乱码之解决之道
2009/11/20 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
Python中的各种装饰器详解
2015/04/11 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
Python登录系统界面实现详解
2019/06/25 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
scrapy-splash简单使用详解
2021/02/21 Python
工业设计专业推荐信
2013/10/29 职场文书
小学教师节活动方案
2014/01/31 职场文书
四风存在的原因分析
2014/02/11 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
保护黄河倡议书
2014/05/16 职场文书
员工试用期工作总结
2019/06/20 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js