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 相关文章推荐
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
jQuery1.6 使用方法二
Nov 23 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
详解JavaScript 高阶函数
Sep 14 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
《PHP边学边教》(01.开篇――准备工作)
2006/12/13 PHP
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
常用的php对象类型判断
2008/08/27 PHP
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
详解python中递归函数
2019/04/16 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
Python中的With语句的使用及原理
2020/07/29 Python
python 解决函数返回return的问题
2020/12/05 Python
python 基于opencv操作摄像头
2020/12/24 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
什么是数组名
2012/05/10 面试题
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
UNIX命令速查表
2012/03/10 面试题
2014年消防工作实施方案
2014/02/20 职场文书
企业承诺书格式
2014/05/21 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
python删除csv文件的行列
2021/04/06 Python
python实现Nao机器人的单目测距
2021/09/04 Python