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 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
javascript实现抢购倒计时程序
Aug 26 Javascript
angular中的post请求处理示例详解
Jun 30 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 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取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
php中session退出登陆问题
2014/02/27 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
JSON相关知识汇总
2015/07/03 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
学习Vue组件实例
2018/04/28 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
图解python全局变量与局部变量相关知识
2019/11/02 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
日语专业个人的求职信
2013/12/03 职场文书
团代会宣传工作方案
2014/05/08 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
特此通知格式
2015/04/27 职场文书
党支部培养考察意见
2015/06/02 职场文书
Java线程的6种状态与生命周期
2022/05/11 Java/Android
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS