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 web页面刷新的方法收集
Jul 02 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
js子页面获取父页面数据示例
May 15 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
JS的深浅复制详细
Oct 16 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
Yii实现文章列表置顶功能示例
2016/10/18 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
面试常见的js算法题
2017/03/23 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
JavaScript中this函数使用实例解析
2020/02/21 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
用Python写一段用户登录的程序代码
2018/04/22 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
python实现的汉诺塔算法示例
2019/10/23 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
python多进程使用函数封装实例
2020/05/02 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
大学班级计划书
2014/04/29 职场文书
投标承诺书怎么写
2014/05/24 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python