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 相关文章推荐
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
js charAt的使用示例
Feb 18 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 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中文分词的简单实现代码分享
2011/07/17 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
php格式文件打开的四种方法
2018/02/24 PHP
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
python实现随机森林random forest的原理及方法
2017/12/21 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
详解Python学习之安装pandas
2019/04/16 Python
python跳出双层for循环的解决方法
2019/06/24 Python
python 修改本地网络配置的方法
2019/08/14 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
J2EE包括哪些技术
2016/11/25 面试题
高中毕业生自我鉴定范文
2013/09/26 职场文书
开门红主持词
2014/04/02 职场文书
幼儿教师求职信
2014/05/24 职场文书
环保项目建议书
2014/08/26 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
廉洁自律证明
2015/06/24 职场文书
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android