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 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
vue实现word,pdf文件的导出功能
Jul 31 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 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 session_start()问题解疑(详细介绍)
2013/07/05 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
教你php如何实现验证码
2016/01/20 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
jquery实现抽奖功能
2020/10/22 jQuery
react中hook介绍以及使用教程
2020/12/11 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
Python简单实现区域生长方式
2020/01/16 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
《鸿门宴》教学反思
2014/04/22 职场文书
干部个人考察材料
2014/12/24 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android