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中contents()方法用法实例
Jan 08 Javascript
javascript 闭包详解
Feb 15 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
转换字符串为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实现Ftp用户的在线管理的代码
2007/03/06 PHP
php中目录,文件操作详谈
2007/03/19 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
Python selenium 三种等待方式解读
2016/09/15 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
Pandas中resample方法详解
2019/07/02 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
《会变的花树叶》教学反思
2014/02/10 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
python编写函数注意事项总结
2021/03/29 Python
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python