重学前端学习笔记(四)-JavaScript对象

广告位

JavaScript对象 实际上,基于对象和面向对象两个形容词都出现在了JavaScript标准的各个版本当中…

JavaScript对象
实际上,基于对象和面向对象两个形容词都出现在了JavaScript标准的各个版本当中。
先看看JavaScript标准对基于对象的定义,这个定义的具体内容是:“语言和宿主的基础设施由对象来提供,并且JavaScript程序即是一系列互相通讯的对象集合”。

面向对象
在《面向对象分析与设计》这本书中,从人类的认知角度来说,对象应该是下列事物之一:

一个可以触摸或者可以看见的东西;
人的智力可以理解的东西;
可以指导思考或行动(进行想象或施加动作)的东西。
在不同的编程语言中,设计者也利用各种不同的语言特性来抽象描述对象,最为成功的流派是使用“类”的方式来描述对象,这诞生了诸如 C++、Java等流行的编程语言。而 JavaScript 早年却选择了一个更为冷门的方式:原型。JavaScript推出之时,在“原型运行时”的基础上引入了new、this等语言特性,使之“看起来更像Java”

JavaScript 对象的特征
总结来看,对象有如下几个特点。

对象具有唯一标识性:即使完全相同的两个对象,也并非同一个对象。
对象有状态:对象具有状态,同一对象可能处于不同状态之下。
对象具有行为:即对象的状态,可能因为它的行为产生变迁。
1.对象具有唯一标识性。一般而言,各种语言的对象唯一标识性都是用内存地址来体现的, 对象具有唯一标识的内存地址,任何不同的JavaScript对象其实是互不相等的:

var o1 = { a: 1 };
var o2 = { a: 1 };
console.log(o1 == o2); // false

2.关于对象的第二个和第三个特征“状态和行为”,不同语言会使用不同的术语来抽象描述它们,比如C++中称它们为“成员变量”和“成员函数”,Java中则称它们为“属性”和“方法”。
JavaScript中的行为和状态都能用属性来抽象。
下面这段代码展示了普通属性和函数作为属性的一个例子,其中o是对象,d是一个属性,而函数f也是一个属性,尽管写法不太相同,但是对JavaScript来说,d和f就是两个普通属性。

var o = {
d: 1,
f() {
console.log(this.d);
}
};

在实现了对象基本特征的基础上, 我认为,JavaScript中对象独有的特色是:对象具有高度的动态性,这是因为JavaScript赋予了使用者在运行时为对象添改状态和行为的能力。

JavaScript对象的两类属性
第一类属性,数据属性。它比较接近于其它语言的属性概念。数据属性具有四个特征。

value:就是属性的值。
writable:决定属性能否被赋值。
enumerable:决定for in能否枚举该属性。
configurable:决定该属性能否被删除或者改变特征值。 在大多数情况下,我们只关心数据属性的值即可。
第二类属性是访问器(getter/setter)属性,它也有四个特征。

getter:函数或undefined,在取属性值时被调用。
setter:函数或undefined,在设置属性值时被调用。
enumerable:决定for in能否枚举该属性。
configurable:决定该属性能否被删除或者改变特征值。
访问器属性使得属性在读和写时执行代码,它允许使用者在写和读属性时,得到完全不同的值,它可以视为一种函数的语法糖。

我们通常用于定义属性的代码会产生数据属性,其中的writable、enumerable、configurable都默认为true。我们可以使用内置函数 Object.getOwnPropertyDescripter来查看,如以下代码所示:

var o = { a: 1 };
o.b = 2;
//a和b皆为数据属性
Object.getOwnPropertyDescriptor(o,”a”) // {value: 1, writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptor(o,”b”) // {value: 2, writable: true, enumerable: true, configurable: true}

在这里使用了两种语法来定义属性,定义完属性后,我们用JavaScript的API来查看这个属性,我们可以发现,这样定义出来的属性都是数据属性,writeable、enumerable、configurable都是默认值为true。

如果我们要想改变属性的特征,或者定义访问器属性,我们可以使用 Object.defineProperty,示例如下:

var o = { a: 1 };
Object.defineProperty(o, “b”, {value: 2, writable: false, enumerable: false, configurable: true});
//a和b都是数据属性,但特征值变化了
Object.getOwnPropertyDescriptor(o,”a”); // {value: 1, writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptor(o,”b”); // {value: 2, writable: false, enumerable: false, configurable: true}
o.b = 3;
console.log(o.b); // 2

这里我们使用了Object.defineProperty来定义属性,这样定义属性可以改变属性的writable和enumerable。

我们同样用Object.getOwnPropertyDescriptor来查看,发现确实改变了writable和enumerable特征。因为writable特征为false,所以我们重新对b赋值,b的值不会发生变化。

在创建对象时,也可以使用 get 和 set 关键字来创建访问器属性,代码如下所示:

var o = { get a() { return 1 } };
console.log(o.a); // 1

访问器属性跟数据属性不同,每次访问属性都会执行getter或者setter函数。这里我们的getter函数返回了1,所以o.a每次都得到1。

这样,我们就理解了,实际上JavaScript 对象的运行时是一个“属性的集合”,属性以字符串或者Symbol为key,以数据属性特征值或者访问器属性特征值为value。

对象是一个属性的索引结构(索引结构是一类常见的数据结构,我们可以把它理解为一个能够以比较快的速度用key来查找value的字典)。我们以上面的对象o为例,你可以想象一下“a”是key。

{writable:true,value:1,configurable:true,enumerable:true}是value。我们在前面的类型课程中,已经介绍了Symbol类型,能够以Symbol为属性名,这是JavaScript对象的一个特色。

陈晨数据工程师

关于作者: 陈晨数据工程师

为您推荐

广告位

发表评论