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 相关文章推荐
JS 进度条效果实现代码整理
May 21 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
微信小程序与webview交互实现支付功能
Jun 07 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数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
python读取Android permission文件
2013/11/01 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
办公自动化毕业生求职信
2014/03/09 职场文书
师德师风自我评价范文
2014/09/11 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
中学教师个人总结
2015/02/10 职场文书
禁毒心得体会范文
2016/01/15 职场文书
导游词之河北野三坡
2019/12/11 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs