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代码
Mar 05 Javascript
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
Javascript中With语句用法实例
May 14 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 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实现telnet功能示例
2014/04/08 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
PHP实现图片压缩
2020/09/09 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
js实现密码强度检验
2017/01/15 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
Vue列表渲染的示例代码
2018/11/01 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
js实现列表按字母排序
2020/08/11 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python自动登录126邮箱的方法
2015/07/10 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
python和c语言的主要区别总结
2019/07/07 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
高级文秘工作总结的自我评价
2013/09/28 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
食品质检员岗位职责
2015/04/08 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
logback 实现给变量指定默认值
2021/08/30 Java/Android
日元符号 ¥
2022/02/17 杂记
SQL Server中使用表变量和临时表
2022/05/20 SQL Server