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实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
又一个小巧的图片预加载类
May 05 Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
vue 开发企业微信整合案例分析
Dec 02 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 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程序员的技术瓶颈分析
2011/07/17 PHP
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
jquery ajax 登录验证实现代码
2009/09/23 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
pytorch实现线性拟合方式
2020/01/15 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
青年志愿者事迹材料
2014/02/07 职场文书
教师个人鉴定材料
2014/02/08 职场文书
学习之星事迹材料
2014/05/17 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
Golang连接并操作MySQL
2022/04/14 MySQL