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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 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
PHP制作图型计数器的例子
2006/10/09 PHP
php中常用编辑器推荐
2007/01/02 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
Python中的filter()函数的用法
2015/04/27 Python
python常见数制转换实例分析
2015/05/09 Python
Python 文件管理实例详解
2015/11/10 Python
python实现各进制转换的总结大全
2017/06/18 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
信息总监管理职责范本
2014/03/08 职场文书
确保工程质量承诺书
2015/04/29 职场文书
商务信函英语问候语
2015/11/10 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫