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 相关文章推荐
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
js实现简单页面全屏
Sep 17 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 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
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
PHP中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
Python编写电话薄实现增删改查功能
2016/05/07 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
python tornado修改log输出方式
2019/11/18 Python
大学生就业自荐信
2013/10/26 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
自荐信的基本格式
2014/02/22 职场文书
企业新年寄语
2014/04/04 职场文书
保护环境倡议书
2014/04/14 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
员工考核评语大全
2014/04/26 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏