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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
jQuery TextBox自动完成条
Jul 22 Javascript
js+css在交互上的应用
Jul 18 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
Javascript获取某个月的天数
May 30 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 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无限极分类实现的两种解决方法
2013/04/28 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
jquery json 实例代码
2010/12/02 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
Python中除法使用的注意事项
2014/08/21 Python
Python中几种操作字符串的方法的介绍
2015/04/09 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
Python requests模块cookie实例解析
2020/04/14 Python
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
生物技术研究生自荐信
2013/11/12 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
音乐教师求职信
2014/06/28 职场文书
化学教育专业自荐信
2014/07/04 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
资产运营委托书范本
2014/10/16 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技