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高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
vue中appear的用法
Aug 17 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 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
php 文件状态缓存带来的问题
2008/12/14 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
Python编程pygal绘图实例之XY线
2017/12/09 Python
python如何定义带参数的装饰器
2018/03/20 Python
详解python3中tkinter知识点
2018/06/21 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
详解Python中import机制
2020/09/11 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
python之随机数函数的实现示例
2020/12/30 Python
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
几个MySql的面试题
2013/04/22 面试题
优秀的茶餐厅创业计划书
2014/01/03 职场文书
酒店总经理欢迎词
2014/01/15 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
班级读书活动总结
2014/06/30 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
继承公证书格式
2015/01/26 职场文书
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL