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获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
javascript冒泡排序小结
Apr 10 Javascript
基于jquery实现图片放大功能
May 07 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 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中empty,isset,is_null用法和区别
2017/02/19 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
javascript 获取图片颜色
2009/04/05 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
全面了解js中的script标签
2016/07/04 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
对python中dict和json的区别详解
2018/12/18 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
python构造函数init实例方法解析
2020/01/19 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
工程业务员工作职责
2013/12/07 职场文书
教师实习自我鉴定
2013/12/11 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
2014年路政工作总结
2014/12/10 职场文书
单位接收函格式
2015/01/30 职场文书
《我的长生果》教学反思
2016/02/20 职场文书