这里有一份简洁的前端知识体系等待你查收，看看吧，会有惊喜哦~如果觉得不错，恳求star哈~

前言

本篇文章是面向对象一篇的先导课。之所以需要这样一篇文章，是因为很多人对对象理解存在偏差，导致无法正确理解面向对象。

什么是对象？

对象并不是计算机领域凭空造出来的概念，它是顺着人类思维模式产生的一种抽象。那么，人类思维模式下，对象究竟是什么。

对象这一概念在人类的幼儿期形成，这远远早于我们编程逻辑中常用的值、过程等概念。

在幼年期，我们总是先认识到某一个苹果能吃（这里的某一个苹果就是一个对象），继而认识到所有的苹果都可以吃（这里的所有苹果，就是一个类），再到后来我们才能意识到三个苹果和三个梨之间的联系，进而产生数字“3”（值）的概念。

在《面向对象分析与设计》这本书中，Grady Booch替我们做了总结，他认为，从人类的认知角度来说，对象应该是下列事物之一：

一个可以触摸或者可以看见的东西；
人的智力可以理解的东西；
可以指导思考或行动（进行想象或施加动作）的东西。

编程语言中的对象

有了对象的自然定义后，我们就可以描述编程语言中的对象了。

在不同的编程语言中，设计者也利用各种不同的语言特性来抽象描述对象，最为成功的流派是使用“类”的方式来描述对象，这诞生了诸如 C++、Java等流行的编程语言。

而 JS 早年却选择了一个相对冷门的方式：原型。这也是 JS 不合群的原因之一。

然而很不幸，因为一些公司政治原因，JS推出之时受管理层之命被要求模仿Java，所以，JS创始人Brendan Eich在“原型运行时”的基础上引入了new、this等语言特性，使之“看起来更像Java”。

在 ES6 出现之前，大量的 JS 程序员试图在原型体系的基础上，把 JS 变得更像是基于类的编程，进而产生了很多所谓的“框架”，比如PrototypeJS、Dojo。

事实上，它们成为了某种 JS 的古怪方言，甚至产生了一系列互不相容的社群，显然这样做的收益是远远小于损失的。

幸运的是，ES6的出现，从语言层面帮我们解决了很多问题。但当下，我们还是要追本溯源，去弄清楚 JS 对象到底是怎么回事，这样有利于我们后续的学习！

首先我们来了解一下 JS 是如何设计对象模型的。

JS对象

基本特征

不论使用什么样的编程语言，我们都应该先理解对象的本质特征。

总结来看，对象有如下几个特点。

对象具有唯一标识性：即使完全相同的两个对象，也并非同一个对象。
对象有状态：对象具有状态，同一对象可能处于不同状态之下。
对象具有行为：即对象的状态，可能因为它的行为产生变迁。

我们先来看第一个特征，对象具有唯一标识性。一般而言，各种语言的对象唯一标识性都是用内存地址来体现的，对象具有唯一标识的内存地址，所以具有唯一的标识。所以，JS 程序员都知道，任何不同的 JS 对象其实是互不相等的。

关于对象的第二个和第三个特征“状态和行为”，不同语言会使用不同的术语来抽象描述它们，比如C++中称它们为“成员变量”和“成员函数”，Java中则称它们为“属性”和“方法”。

考虑到 JS 中将函数设计成一种特殊对象，所以 JS 中的行为和状态都能用属性来抽象。

下面这段代码其实就展示了普通属性和函数作为属性的一个例子，其中o是对象，d是一个属性，而函数f也是一个属性，尽管写法不太相同，但是对JS来说，d和f就是两个普通属性。

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

所以，总结一句话来看，在JS中，对象的状态和行为其实都被抽象为了属性。

独有特征

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

举个例子：

var o = { a: 1 };
o.b = 2;
console.log(o.a, o.b); //1 2

JS 允许运行时向对象添加属性。上面这段代码就展示了运行时如何向一个对象添加属性，先定义了一个对象o，定义完成之后，再添加它的属性b，这样操作是完全没问题的。

JS对象的属性

为了提高抽象能力，JS 的属性被设计成比别的语言更加复杂的形式，它提供了数据属性和访问器属性两类。

对 JS 来说，属性并非只是简单的名称和值，JS 用一组特征（attribute）来描述属性（property）。

先来说第一类属性，数据属性。

它比较接近于其它语言的属性概念。数据属性具有四个特征。

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}

如果我们要想改变属性的特征，或者定义访问器属性，我们可以使用 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

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

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

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

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

对象是一个属性的索引结构（索引结构是一类常见的数据结构，我们可以把它理解为一个能够以比较快的速度用key来查找value的字典）。

var o = { a: 1 };

对于上面定义的对象o，属性a完整的描述应该是：“a”是key，{writable:true,value:1,configurable:true,enumerable:true}是value。

我们在前面的类型课程中，已经介绍了Symbol类型，能够以Symbol为属性名，这是 JS 对象的一个特色。

相信你也听说过类似的说法，诸如“JS不是面向对象”。这是由于 JS 的对象设计跟目前主流基于类的面向对象差异非常大。

可事实上，这样的对象系统设计虽然特别，但是 JS 提供了完全运行时的对象系统，这使得它可以模仿多数面向对象编程范式，所以它也是正统的面向对象语言。

况且，JS 语言标准也已经明确说明，JS 是一门面向对象的语言，这跟 JS 的高度动态性的对象系统是分不开的。

总之，我们应该在理解 JS 设计思想的基础上充分挖掘它的能力，而不是机械地模仿其它语言。

结语

要想理解 JS 对象，必须清空我们脑子里“基于类的面向对象”相关的知识，回到人类对对象的朴素认知和面向对象的语言无关基础理论，我们就能够理解 JS 面向对象设计的思路。

在这篇文章中，我们从对象的基本理论出发，理清了关于对象的一些基本概念，分析了 JS 对象的设计思路。接下来又从运行时的角度，介绍了 JS 对象的具体设计：具有高度动态性的属性集合。