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 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
es6中let和const的使用方法详解
Feb 24 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 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流量统计功能的实现代码
2012/09/29 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
php导出生成word的方法
2015/12/25 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
Python OpenCV获取视频的方法
2018/02/28 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
10张动图学会python循环与递归问题
2021/02/06 Python
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
环保倡议书300字
2014/05/15 职场文书
素质教育标语
2014/06/27 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
检讨书格式
2019/04/25 职场文书
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
python实现简单的聊天小程序
2021/07/07 Python