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 相关文章推荐
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
asm.js使用示例代码
Nov 28 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 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
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
详解Python中列表和元祖的使用方法
2015/04/25 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
200行python代码实现2048游戏
2019/07/17 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
Python实现把类当做字典来访问
2019/12/16 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
2014小学语文教师个人工作总结
2014/12/03 职场文书
工作感言一句话
2015/08/01 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers