原博地址:http://www.cnblogs.com/dolphinX/p/3288118.html

JavaScript 有Date Array String等这样的内置对象,功能强大实用简单,但在处理一些复杂逻辑的时候,内置对象就很无力了,往往需要开发者自定义对象。

对象是什么

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

最简单的对象

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

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

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

var obj = {};
//添加属性 和 方法
obj.a = ;
obj.fun = function() {
alert("我是一个对象");
} var obj2 = {
a:;
fn:function(){
alert("我是自定义对象");
}
}

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

抽象一下

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

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

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

有型一些

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

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

(2)function作为构造函数(通过new操作符调用)的时候会返回一个对象,

构造函数的返回值分为两种情况,当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.fun = function() {
alert(this.name);
} } var person2=new Person('Frank');
person2.fun();

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

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,基本问题都解决了,对于一般的对象处理就可以始终这个有型又有爱的创建对象模式了。

// http://www.cnblogs.com/dolphinX/p/3286177.html

HTML 学习笔记 JavaScript(创建对象)的更多相关文章

  1. 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

    学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...

  2. HTML 学习笔记 JavaScript(面向对象)

    现在让我们继续跟着大神的脚步前进 学习一下JavaScript中的面向对象的思想,其实作为一个iOS开发者,对面向对象还是比较熟悉的,但是昨晚看了一下Js中的面向对象,妈蛋 一脸萌比啊.还好有大神.让 ...

  3. [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

    当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...

  4. HTML 学习笔记 JavaScript (prototype)

    原博地址:http://www.cnblogs.com/dolphinX/p/3286177.html 原博客的作者是一个非常牛逼的前端大神,我作为一个初学者,在此借助大神的博客进行自己的学习.在这里 ...

  5. HTML 学习笔记 JavaScript(数组)

    1.数组的创建 var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是 ...

  6. [学习笔记]JavaScript基础

    JavaScript概述 1. JavaScript定义 JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言.它是弱类型语言.仅仅能由浏览器解释运行. 当中: 脚本语言: ...

  7. HTML 学习笔记 JavaScript (String)

    String对象用于存储字符串的数据.这里我们做了JavaScript的String字符串对象常用操作总结. 创建String对象的方式 声明:String 对象的方法也可以在所有基本字符串值中访问到 ...

  8. HTML 学习笔记 JavaScript (节点)

    HTML 节点: HTML DOM定义了所有HTML元素的对象和属性 以及访问它们的方法. HTML DOM是关于如何获取 修改 添加 或 删除HTML元素的标准. 在js中通过document这个对 ...

  9. HTML 学习笔记 JavaScript (DOM)

    一 DOM 简介 通过HTML DOM 可以访问JavaScript 文档的所有元素 当网页被加载的时候,浏览器会创建页面的文档对象模型 HTML DOM 模型被构造成对象的树 HTML DOM 树 ...

随机推荐

  1. Java--Jsp内置对象列表

  2. python字符串连接的N种方式

    python中有很多字符串连接方式,今天在写代码,顺便总结一下: 最原始的字符串连接方式:str1 + str2 python 新字符串连接语法:str1, str2 奇怪的字符串方式:str1 st ...

  3. WePayUI 快快尝鲜体验

    好久没有更新博客了... 时间真的很快~~~ 不废话了..干货会直接上~~~ WePayUI是什么 WePayUI 由微信支付为服务商和商户量身打造,用于快速制作符合微信支付规范的Web页面.WePa ...

  4. UIPickerView的使用(二)

    上篇文章 UIPickerView的使用(一)学习了如何创建单列选择器,现在看一下如何创建多列选择器 多列选择器(以二列为例) 1.遵守协议和创建两个数据源 2.创建pickView 3.实现代理 / ...

  5. OC笔记一:Objective-C简介

    1.OC简介 全称:Objective-C,是扩充C的面向对象编程语言,主要用于iOS和Mac OS开发. C语言的基础上,增加了一层最小的面向对象语法 完全兼容C语言 可以在OC代码中混入C语言代码 ...

  6. SharePoint 2013 必备组件之 Windows Server AppFabric 安装错误

    1.如下图,在使用SharePoint2013产品准备工具的时候,网上下载安装Windows Server AppFabric的时候,报错,点击完成重启计算机,重新安装依然报错. 2.无奈之下,只有选 ...

  7. Atitit.报名模块的管理

    Atitit.报名模块的管理 1.1. 统计报名数据1 1.2. 存储1 1.3. 报名1 1.4. 查看报名数据3 1.1. 统计报名数据 select count(*) as nums from ...

  8. iOS之隐藏键盘的方式

    一.//触摸空白处隐藏键盘 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { [_feedBackTextView r ...

  9. Android开发--异步加载

    因为移动端软件开发思维模式或者说是开发的架构其实是不分平台和编程语言的,就拿安卓和IOS来说,他们都是移动前端app开发展示数据和用户交互数据的数据终端,移动架构的几个大模块:UI界面展示.本地数据可 ...

  10. [转]PaaS平台分类

    本文转自阿朱说 大家发现没,自从我们上升到有规模的互联网架构后,咱们中国的技能能力就跟不上了,只能采取国际业界顶级大公司开源出来的而且已经经受住大规模实际应用考验的组件来搭架构,因而咱们近几年大规模网 ...