JavaScript高级程序设计(第3版)学习笔记6 初识js对象


Posted in Javascript onOctober 11, 2012

在房子里面可以放你想放的任意事物——如果你有足够的美学造诣,你甚至可以弄一个房中房试试——当然,为了方便管理,我们会给房子里存放的所有事物都会取上一个不重复的名字,比如医药房间里的各种药品名称。在ECMAScript中,你可以在对象中存放任意你想放的数据,同样,我们需要给存放的数据取一个名字——也就是对象的属性名,再存放各种数据。再看看ECMA-262中对象的定义:无序属性的集合,其属性可以包含简单数据类型值、对象或者函数。

进入对象,我开始有些激动了,说实话,让我想起做这系列学习笔记的最初原因,就是因为该书对对象的深刻论述,让我对JavaScript的认知从客户端验证小工具转变成一门强大的面向对象脚本语言,但我现在也有点犯难了,因为关于对象,有太多太多的东西需要去细化,一时也不知该从哪个点切入,比如要想深入理解对象,作用域、执行环境、闭包这些概念是肯定离不开的,但如果连对象的概念都没说就开始执行环境和闭包,又感觉像是空中楼阁。不过又一想,也就释然了,这毕竟只是自己的个人学习笔记,又不是什么教科书,我大可以使用自己喜欢的方式来做自己的笔记(事实上,在前面的篇章中,我就有意识的重复那些我认为有意思的地方,这就是我喜欢的一种方式),当然,我还是会尽量以一种易于理解的方式来做这些笔记。

对象类型

和5种简单数据类型(Undefined、Null、Boolean、Number、String)相对应,对象(Object)也是一种数据类型,只是这种数据类型比较特别,它不但可以像简单数据类型一样存取通常的数据,而且可以将动作行为作为一种特殊的数据加以存取。

1、对象实例

每种数据类型都有相应的值,比如Undefined类型只有一个值undefined,而数字5是Number类型的一个值。对于对象类型,我们把值称为对象实例,那么对象类型都可以有哪些(值)实例呢?任意一个对象都是对象类型的值(实例),比如简单类型包装对象(Boolean、Number、String)就是对象类型的值(实例)。

2、对象字面量

既然任意一个对象都是对象类型的实例,那么对象实例怎么表示呢?或者说我们在交流过程中怎么书写出对象实例呢?简单数据类型的值很好表示,比如用符号“5”表示数字5,符号“true”表示Boolean值true,这些被称为字面量,那么,有没有对象字面量呢?答案是肯定的,对象字面量就是通过一对大括号({})来表示的。比如:

{ 
name:'linjisong', 
getName:function(){ 
return this.name; 
} 
}

这里最外层的一对大括号({})就表示这是一个对象字面量。另外,还有数组字面量的概念,在ECMAScript中,数组Array是一个继承了Object的对象实例,通过这个对象实例可以创建数组类型的实例,数组类型的实例也可以直接通过数组字面量来表示,方法如下:
[{ 
name:'linjisong', 
age:29 
},{ 
name:'oulinhai', 
age:23 
}]

这里一对中括号([])用于表示数组,这是一个包含了两个对象的数组。通过对象字面量和数组字面量,形成了难以想象的强大表现力,事实上,流行的JSON数据格式就是基于此。

3、创建对象实例

熟悉一般面向对象的朋友都知道,要创建一个类的实例,首先要定义这个类,然后用new关键字来创建这个类的实例(别和我说还可以使用反射,我的Java可学的不好……)。但是在ECMAScript中,根本没有类的概念,那么,对象实例要怎么创建呢?

在ECMAScript中尽管没有类,但是也有某种程度上类似的概念,承担这个角色的就是函数,可以通过new操作符和函数来创建对象实例——每一个对象实例都有一个用于创建这个实例的函数。最基本的函数就是Object(),它是用来创建最一般对象的函数,其它的诸如Number()函数,可以用来创建Number对象的实例,Boolean()函数,可以用来创建Boolean对象的实例:

var obj = new Object();//Object()函数,创建最一般的对象实例 
var num = new Number(1);//Number()函数,创建Number对象的实例 
var boo = new Boolean(true);//Boolean()函数,创建Boolean对象的实例 
console.info(typeof num);//object 
console.info(typeof Number(1));//number 
console.info(typeof boo);//object 
console.info(typeof Boolean(true));//boolean

(1)可以看到,要创建一个对象实例,首先需要有一个函数(称为构造函数),这个函数使用new调用时就是创建对象实例,不使用new时只是通常意义上的函数调用(如果这个函数在内部返回实例了,函数调用也可以创建对象)。

(2)所谓的内置对象实际上也就是内置了一些创建对象实例的函数而已,不同的函数创建不同的内置对象。

(3)关于要不要使用new操作符,我的建议是使用,如果不使用new操作符,有些情况下结果会出乎你的意料之外,像上例中的第5、7行,实际上并没有创建对象,而只是普通的函数调用,这个调用的作用就是转换数据类型。

(4)使用new创建对象实例时,如果调用构造函数不需要传入参数,也可以省略后面的函数调用操作符(()),当然,这种特性也不是什么值得宣扬的事情。

(5)如果需要创建自定义对象的实例,那么首先也需要定义一个构造函数,然后使用new操作符调用创建实例。这里需要注意,如果忘了new的话,可能会污染全局环境:

function Person(){//首先定义一个用于创建对象实例的(构造)函数 
this.name = 'linjisong'; 
this.age = 29; 
} var person = new Person();//调用(构造)函数创建对象实例 
console.info(person.age);//29 
try{ 
console.info(age);//为了演示忘记使用new的情况,这里先输出全局的age,由于未定义,抛出异常 
}catch(e){ 
console.info(e);//ReferenceError 
} 
var person2 = Person();//忘记使用new的情况下,只是普通的函数调用,由于函数没有返回,这里person2就是undefined了 
console.info(person2);//undefined 
console.info(age);//29,没有使用new,内部的this指向了全局作用域,因为可以在全局访问age了

要避免这种问题,可以修改一下构造函数:
function Person(){ 
if(this instanceof Person) 
{ 
this.name = 'linjisong'; 
this.age = 29; 
}else{ 
return new Person(); 
} 
} 
var person2 = Person(); 
console.info(person2.age);//29,可以访问person2的age了 
console.info(age);//全局环境中没有age的定义了,抛出异常

这个构造函数首先判断this值是否为Person类型,如果不是,就在内部使用new调用,以确保返回的值一定是Person类型实例。这种方式使得重构构造函数成为了可能,也许Boolean()、Number()、String()在实现上就是使用了这种方式来区分是构造函数还是转换函数。如果你在调用Object()时省略new的话,结果也能返回对象,估计也是在后台做了类似处理,同样的情况还有本文后部分要讲的函数类型构造函数Function()。

(5)可能有人会问,既然有对象字面量,何必要用这么复杂的方式来创建对象实例呢,直接写对象字面量不就完了?用对象字面量创建对象实例,根本没有使用什么函数,看来,上面的“每一个对象实例都有一个用于创建这个实例的函数”的说法并不正确。

首先第一个问题,的确,可以使用对象字面量来创建函数,而且也非常简洁,这甚至也是我首先推荐的一种创建方式,但是用这种方式创建对象实例,只能创建单例的实例,对于需要创建多个相同类型的对象实例来说并不适用,然后第二个问题,用对象字面量创建对象,实际上并不是没有相应的构造函数,只是构造函数为Object(),使用对象字面量,后台可能不会去调用new Object(),但创建出的对象仍然有指向这个函数的属性,这可以从下面代码输出中得到验证:

var person = {}; 
console.info(person.constructor===Object);//true

这里的constructor是每个实例对象都有的一个属性,用于保存创建这个对象实例的函数,这就是下面要讲的。

4、对象属性和方法

每一种数据类型都有各自的共性,比如Number类型值都有可以和另外一个Number类型值相加的特性,同样,对象类型的实例也有一些相同的特性,这些特性就体现在它们都包含下面的属性和方法(方法实际上也是一种属性,只是属性的值类型是函数的话,我们也称之为方法):

类别 属性/方法 说明
属性 constructor 指向用于创建当前对象的函数
方法 hasOwnProperty(propertyName) 检查给定的属性是否在当前对象实例中
propertyIsEnumerable(propertyName) 检查给定的属性是否能够是使用for-in语句来枚举
isPrototype(object) 检查传入的对象是否是另一个对象的原型
toLocalString() 返回对象的字符串表示,该字符串与执行环境的地区相对应
toString() 返回对象的字符串表示
valueOf() 返回对象的字符串、数值或布尔值表示,通常与toString()方法返回值相同

注:在《JavaScript高级程序设计(第3版)》第35页中的Constructor将首字母大写了,应该是一个印刷错误。

属性和方法的访问有两种方式:

(1)使用点号(.):如person.name。

(2)使用方括号([]):如person[name],使用这种方式,方括号内部可以是一个变量或者表达式,这使得可以访问名称包含特殊符号的属性和方法。

通过结合for-in和这里的hasOwnProperty (propertyName),我们就可以遍历对象实例自身的属性而不包括从原型链继承而来的属性了:

for(var propertyName in object){ 
if(object.hasOwnPorperty(propertyName)){ 


//循环处理 

} 
}
Javascript 相关文章推荐
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
深入学习JavaScript对象
Oct 13 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
node结合swig渲染摸板的方法
Apr 11 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
angular4实现带搜索的下拉框
Mar 25 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 #Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 #Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 #Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 #Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 #Javascript
javascript测试题练习代码
Oct 10 #Javascript
jQuery插件开发全解析
Oct 10 #Javascript
You might like
php学习之function的用法
2012/07/14 PHP
php模板原理讲解
2013/11/13 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
简单的php购物车代码
2020/06/05 PHP
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
Python与shell的3种交互方式介绍
2015/04/11 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
Django模板语言 Tags使用详解
2019/09/09 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
医学生自荐信范文
2013/12/03 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
如何写辞职信
2015/05/13 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
python 调用js的四种方式
2021/04/11 Python