JavaScript中创建类/对象的几种方法总结


Posted in Javascript onNovember 29, 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 相关文章推荐
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
JavaScript中DOM详解
Apr 13 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
JS实现标签页切换效果
May 04 Javascript
微信小程序如何获取地址
Dec 24 Javascript
转换字符串为json对象的方法详解
Nov 29 #Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 #Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 #Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 #Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 #Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 #Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 #Javascript
You might like
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
PHP 选项及相关信息函数库
2006/12/04 PHP
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
php实现数字补零的方法总结
2018/09/12 PHP
javascript实现动态标签云
2015/10/16 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
Python随机函数random()使用方法小结
2018/04/29 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
巴西手表购物网站:eclock
2019/03/19 全球购物
百度软件工程师职位
2013/02/14 面试题
宝宝周岁宴答谢词
2014/01/26 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
乐山大佛导游词
2015/02/02 职场文书
英语邀请函范文
2015/02/02 职场文书
工程技术员岗位职责
2015/04/11 职场文书
学校会议通知范文
2015/04/15 职场文书
导游词之上海豫园
2019/10/24 职场文书
如何理解python接口自动化之logging日志模块
2021/06/15 Python
MongoDB数据库的安装步骤
2021/06/18 MongoDB
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android