--本文采自本人公众号《猴哥别瞎说》

与其它的语言相比,JavaScript 中的“对象”总是显得不那么合群。

有过其他面向对象编程经验(如C++、Java)的童鞋开始写 JavaScript 时,会感到奇怪:

“你说 JavaScript 是面向对象的语言,怎么和我之前接触的面向对象语言不一样咧?它都没有类的概念(虽然 ES6 中已经有了),怎么能够算面向对象的语言呢?”

“在 JavaScript 对象里可以自由添加属性,而且是动态添加的方式。这波操作很6。但其他面向对象的语言都没有这个功能呢。。”

这些疑问与困惑,一部分会是头脑中关于“面向对象”的概念中包含了一个默认的点:面向对象是基于类的。

在本文中,首先就要挑战一下:什么是面向对象编程?然后再来看看 JavaScript 中的面向对象究竟是什么。

什么是面向对象?

我们先来说说什么是对象。Object(对象)在英文中,是一切事物的总称,这和面向对象编程的抽象思维有互通之处。

中文单词“对象”却没有这样的普适性。因此我们在学习编程的过程中,更多是把它当作一个专业名词来理解。

计算机领域中的对象并不是凭空创造出来的概念,它是顺着人类思维模式产生的一种抽象。面向对象编程也被认为是更接近人类思维模式的一种编程范式。

那么,追本溯源,我们来看看人类思维模式下,对象究竟是什么:

识别物理对象的能力是人类在早起就掌握的技能。一个色彩鲜艳的小球会吸引婴儿的注意力,通常情况下,如果把球藏起来,小孩不会试图去寻找他。当对象离开了她的视野时,根据她的判断,这个对象就不存在了。一般直到接近一岁是,小孩才会建立起所谓“对象概念”,这种能力对于将来认知的发展相当重要。像一个一岁小孩展示一个球,然后再藏起来,她通常会寻找这个球,即使这个球不在视野之中。通过对象的概念,小孩意识到对象具有持久性和标识符,这与施加在对象上的操作无关。 ---《面向对象分析与设计·第三章》

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

  1. 一个可以触摸或者可以看见的东西;
  2. 人的智力可以理解的东西;
  3. 可以指导思考或行动(进行想象或施加动作)的东西。

有了对象的自然定义后,我们就可以描述编程语言中的对象了。不同的设计者,在不同编程语言中对于对象的描述方式都不太一样。最为成功的流派是使用“类”的方式来描述对象,这诞生了C++Java等流行的基于类的面向对象编程语言。

JavaScript的设计者选择了一个冷门的方式:基于原型的面向对象方式。如果你了解一些关于JavaScript被研究出来的历史,会了解到JavaScript之所以变得另类的原因:因为一些公司政治原因,JavaScript推出之时受管理层之命被要求模仿Java,所以,JavaScript 创始人 Brendan Eich 在“原型运行时”的基础上引入了 newthis 等语言特性,使之“看起来更像 Java”。

这也就是JavaScript看起来另类的原因。

也正是因为基于类的面向对象模式的热门,在ES6出现以前,大量的JavaScript程序员试图在基于原型的设计基础上,让JavaScript变得更像是基于类的编程。也由此产生了很多框架。但任何一门语言的设计思想都有其独特之处,强硬将基于原型的JavaScript改成基于类的做法,是吃力不讨好的。

下面,让我们来了解一下JavaScript是如何设计对象的吧。

JavaScript对象的特征

在《面向对象分析与设计》这本书中,Grandy Booch 总结了对象的几个特征:

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

不管我们使用什么样的编程语言,都应该先了解对象的本质特征。那么我们来看看JavaScript的设计师如何体现对象的这几个特征的呢?

先来看第一个特征:对象具有唯一标识性。一般而言,各种语言的对象唯一标识性都是用内存地址来体现的, 对象具有唯一标识的内存地址,所以具有唯一的标识。JavaScript中,任何不同的JavaScript对象其实是不相等的,我们可以简单验证一下:

 var obj1 = { a : 2};
 var obj2 = { a : 2};
 
 console.log( obj1 == obj2); // false
复制代码

关于对象的第二个和第三个特征“状态和行为”,不同语言会使用不同的术语来抽象描述它们。在JavaScript中,将状态和行为统一抽象为“属性”,考虑到JavaScript 中将函数设计成一种特殊对象,所以JavaScript中对象的行为和状态都能够用属性来抽象。下面的栗子很好地展示了普通属性和函数作为对象的属性:

 var obj1 = { 
        a : 2, 
        f() {
            console.log(this.a);
        }
};
复制代码

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

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

下面这段代码就展示了运行时如何像一个对象添加属性:

 var obj1 = { a : 2};
 obj1.c = 21;
 console.log( obj1.a + obj1.c); // 23
复制代码

如果你使用过类似 Java 或者别的基于类的、静态的编程设计语言,那么对于这样的动态添加一定会感到奇怪。

尽管设计思路有一定差别,但是二者都很好地表现了对象的基本特征:标识性、状态和行为。这仅仅只是实现方式上的差别而已,两者都是基于对象的设计思想。

上面的描述已经描述了 JavaScript 基于对象的基本特征设计的思路。接下来看看,JavaScript中的对象都有怎样的属性吧。

JavaScript对象的两类属性

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

JavaScript中,属性并非只是简单的名称和值,JavaScript 用一组特征(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
复制代码

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

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

    var o = { get a() { return 1 } };

    console.log(o.a); // 1
复制代码

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

对象是一个属性的索引结构。以上面的对象 o 为例,a是 key。{writable:true,value:1,configurable:true,enumerable:true}是 value。

总结

看到这里,我们也就会明白,为什么会有“JavaScript不是面向对象”这样的说法了。因为JavaScript的设计和主流的基于类的设计思想差异非常的大。

可事实上,这样的对象系统设计虽然特别,但是它提供了运行时的对象系统,也完全符合面向对象设计的规范。所以它也是正儿八经的面向对象编程语言。

如果我们能够首先删除“基于类的面向对象”的一些预设,从最朴素的面向对象的观点来看待JavaScript,那么可能会更好理解其独特的面向对象的设计思想。

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