JavaScript创建对象的写法


Posted in Javascript onAugust 29, 2013

对象是什么
从JavaScript定义上讲对象是无序属性的集合,其属性可以包含基本值、对象或函数。也就是说对象是一组没有特定顺序的属性,每个属性会映射到一个值上,是一组键值对,值可以是数据或对象。

最简单的对象
JavaScript的一对花括号{}就可以定义一个对象,这样的写法实际上和调用Object的构造函数一样

var obj={};
var obj2=new Object();

这样构建出来的对象仅仅包含一个指向Object的prototype的指针,可以使用一些valueOf、hasQwnProperty等方法,没有多大实际作用,自定义对象嘛总要有一些自定义的属性、方法神马的。

var obj={};
            obj.a=0;
            obj.fn=function(){
                alert(this);
            }            var obj2={
                a:0,
                fn:function(){
                    alert(this);
                }
            }

可以在定义完对象后通过”.”为其添加属性和方法,也可以使用字面量赋值方法在定义对象的时候为其添加属性和方法,这样创建的对象,其方法和属性可以直接使用对象引用,类似于类的静态变量和静态函数,这样创建对象有一个明显缺陷——在定义大量对象的时候很费力,要一遍遍的写几乎是重复的代码。

抽象一下
既然是重复代码就可以抽象出来,用函数来做这些重复工作,在创建对象的时候调用一个专门创建对象的方法,对于不同的属性值只需要传入不同参数即可。

function createObj(a,fn){
                var obj={};
                obj.a=a;
                obj.fn=fn;
                return obj;
            }            var obj=createObj(2,function(){
                alert(this.a);
            });

这样在创建大量对象的时候,就可以通过调用此方法来做一些重复工作了,这种方式也不完美,因为在很多时候需要判断对象的类型,上面代码创建出来的对象都是最原始的Object对象实例,只是拓展了一些属性和方法。

有型一些

又是function登场的时候,JavaScript中function就是个对象,在创建对象的时候打可以抛开上面createObj方法,直接使用function作为对象,怎么实现复用呢,这就在于function作为对象的特殊性了。

1. function可以接受参数,可以根据参数来创建相同类型不同值的对象

2. function作为构造函数(通过new操作符调用)的时候会返回一个对象,在贫下中农版jQuery中提到过一些构造函数的基本知识,简单复制一下

构造函数的返回值分为两种情况,当function没有return语句或者return回一个基本类型(bool,int,string,undefined,null)的时候,返回new 创建的一个匿名对象,该对象即为函数实例;如果function体内return一个引用类型对象(Array,Function,Object等)时,该对象会覆盖new创建的匿名对象作为返回值。

3. 那么使用function怎么解决类型识别问题呢,每个function实例对象都会有一个constructor属性(也不是“有”,而是可以对应),这个属性就可以指示其构造是谁,也可以使用instanceof 操作符来做判断对象是否为XXX的实例。

不能光说不练,上代码

function Person(name){
                this.name=name;
                this.fn=function(){
                    alert(this.name);
                }
            }            var person1=new Person('Byron');
            console.log(person1.constructor==Person);//true
            console.log(person1 instanceof Person); //true

这样就完美了吧,也不是!虽然构造函数可以是对象有型,但对象的每个实例中的方法都要重复一遍!

function Person(name){
                this.name=name;
                this.fn=function(){
                    alert(this.name);
                }
            }            var person1=new Person('Byron');
            var person2=new Person('Frank');
            console.log(person1.fn==person2.fn);//false

看看看,虽然两个实例的fn一模一样,但是却不是一回事儿,这如果一个function对象有一千个方法,那么它的每个实例都要包含这些方法的copy,很让内存无语啊。

不玩儿虚的了

究竟有没有一种近乎完美的构造对象的方式,及不用做重复工作,又有型,对象通用方法又不必重复?其实可以发现使用function已经距离要求和接近了,只差那么一点儿——需要一个所有function对象的实例共享的容器,在这个容器内存发实例需要共享的属性和方法,正好这个容器是现成的——prototype,不了解prototype的同学可以看看JavaScript prototype

function Person(name){
                this.name=name;
            }            Person.prototype.share=[];
            Person.prototype.printName=function(){
                alert(this.name);
            }
            var person1=new Person('Byron');
            var person2=new Person('Frank');
            console.log(person1.printName==person2.printName);//true

这样每个Person的实例都有自己的属性name,又有所有实例共享的属性share和方法printName,基本问题都解决了,对于一般的对象处理就可以始终这个有型又有爱的创建对象模式了。

Javascript 相关文章推荐
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
js 返回时间戳所对应的具体时间
Jul 20 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 #Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 #Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 #Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 #Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 #Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 #Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 #Javascript
You might like
php 远程图片保存到本地的函数类
2008/12/08 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
python中threading超线程用法实例分析
2015/05/16 Python
python类装饰器用法实例
2015/06/04 Python
200行自定义python异步非阻塞Web框架
2017/03/15 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
加热夹克:RAVEAN
2018/10/19 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
物业管理专业求职信
2014/06/11 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
助学感谢信范文
2015/01/21 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
八年级语文教学反思
2016/03/03 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
Mysql事务索引知识汇总
2022/03/17 MySQL
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python