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-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
javascript数据类型示例分享
Jan 19 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
微信小程序按钮点击动画效果的实现
Sep 04 Javascript
如何在VUE中使用vue-awesome-swiper
Jan 04 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转换IP地址到真实地址的方法详解
2013/06/09 PHP
php无序树实现方法
2015/07/28 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
React Router基础使用
2017/01/17 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
输入N,打印N*N矩阵
2012/02/20 面试题
百度JavaScript笔试题
2015/01/15 面试题
12岁生日感言
2014/01/21 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
自我推荐信格式模板
2015/03/24 职场文书
世界名著读书笔记
2015/06/25 职场文书
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python