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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
js getElementsByTagName的简写方式
Jun 27 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 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(3)
2006/10/09 PHP
windows xp下安装pear
2006/12/02 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
教大家制作简单的php日历
2015/11/17 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
js兼容标准的表格变色效果
2008/06/28 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
vue实现文件上传功能
2018/08/13 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
Django开发中复选框用法示例
2018/03/20 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
python实现三种随机请求头方式
2021/01/05 Python
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
如何通过jdbc调用存储过程
2012/04/19 面试题
行政人员岗位职责
2013/12/08 职场文书
高中运动会广播稿
2014/01/21 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
员工2014年度工作总结
2014/12/09 职场文书
车间统计员岗位职责
2015/04/14 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang