重学前端-总结：06 、JavaScript对象：面向对象还是基于对象？

深碍√TFBOYSˉ_ 2021-09-28 05:36 300阅读 0赞

### 文章目录 ###

*  重学前端-总结：06 、JavaScript对象：面向对象还是基于对象？
 *   *  什么是面向对象？
     *  背景
     *  JavaScript 对象的特征-
     *  JavaScript 对象的两类属性
     *  结语

# 重学前端-总结：06 、JavaScript对象：面向对象还是基于对象？ #

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

## 什么是面向对象？ ##

我们先来说说什么是对象，因为翻译的原因，中文语境下我们很难理解“对象”的真正含义。事实上，Object（对象）在英文中，是一切事物的总称，这和面向对象编程的抽象思维有互通之处。

## 背景 ##

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

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

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

而 JavaScript 早年却选择了一个更为冷门的方式：原型。这是我在前面说它不合群的原因之一。

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

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

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

如果我们从运行时角度来谈论对象，就是在讨论 JavaScript 实际运行中的模型，这是由于任何代码执行都必定绕不开运行时的对象模型。

不过，幸运的是，从运行时的角度看，可以不必受到这些“基于类的设施”的困扰，这是因为任何语言运行时类的概念都是被弱化的。

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

## JavaScript 对象的特征- ##

Grandy Booch《面向对象分析与设计》。总结来看，对象有如下几个特点。

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

JavaScript 程序员都知道，任何不同的 JavaScript 对象其实是互不相等的，

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

普通属性和函数作为属性的一个例子，其中 o 是对象，d 是一个属性，而函数 f 也是一个属性，尽管写法不太相同，但是对 JavaScript 来说，d 和 f 就是两个普通属性。

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

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

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

运行时如何向一个对象添加属性，一开始我定义了一个对象 o，定义完成之后，再添加它的属性 b

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

## JavaScript 对象的两类属性 ##

对 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}

我们在这里使用了两种语法来定义属性，定义完属性后，我们用 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 的值不会发生变化。

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

JavaScript 语言标准也已经明确说明，JavaScript 是一门面向对象的语言，我想标准中能这样说，正是因为 JavaScript 的高度动态性的对象系统。

## 结语 ##

人类对对象的朴素认知和面向对象的语言无关基础理论，去理解 JavaScript 面向对象设计的思路。  
从对象的基本理论出发，理清了关于对象的一些基本概念，分析了 JavaScript 对象的设计思路。  
从运行时的角度，介绍了 JavaScript 对象的具体设计：具有高度动态性的属性集合。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70_pic_center]: /images/20210923/ee3e7450b3d347ab83e7376ceff49100.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210923/864fe3a27f9b4720960ee5cc73382299.png

发表评论取消回复

表情：

评论列表（有 0 条评论，300人围观）

还没有评论，来说两句吧...

相关阅读

相关面向过程、基于对象、面向对象、分析

一：基础概念 1.1 面向过程 “面向过程”(Procedure Oriented)是一种以过程为中心的编程思想。这些都是以什么正在发生为主要目标进行编程，不同于面

傷城~/ 2023年10月09日 14:12/ 0 赞/ 47 阅读

相关 JavaScript学习总结（5）——Javascript面向(基于)对象编程

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 一、澄清概念　　1.JS中"基于对象=面向对象"

妖狐艹你老母/ 2022年10月02日 08:54/ 0 赞/ 183 阅读

相关基于对象和面向对象

面向对象的三大特点（封装，继承，多态）缺一不可。通常“基于对象”是使用对象，但是无法利用现有的对象模板产生新的对象类型，继而产生新的对象，也就是说“基于对象”

叁歲伎倆/ 2022年05月28日 07:20/ 0 赞/ 216 阅读

相关 JavaScript面向对象

一、面向对象 0x1 基本概念对代码的一种抽象，对外统一提供调用接口的编程思想，基于原型的面向对象方式中，对象（object）则是依靠构造器（constructo

待我称王封你为后i/ 2022年05月19日 12:53/ 0 赞/ 342 阅读

相关前端_JavaScript_面向对象编程

面向对象编程 Objects对象的原生方法分成两类：Object自身的方法(静态方法)和Object的实例方法。注意Object是JavaScript的原生对象，所有的其

小灰灰/ 2022年03月07日 01:35/ 0 赞/ 298 阅读

相关 JavaScript到底是面向对象还是基于对象？

你好，我是前阿里手淘前端负责人winter，这篇文章来自于我在极客时间专栏「重学前端」中讲解JavaScript的部分。与其它的语言相比，JavaScript中的“对象”总

桃扇骨/ 2022年02月22日 08:53/ 0 赞/ 244 阅读

相关 JavaScript到底是面向对象还是基于对象？

你好，我是前阿里手淘前端负责人winter，这篇文章来自于我在极客时间专栏「重学前端」中讲解JavaScript的部分。与其它的语言相比，JavaScript中的“对象”总

忘是亡心i/ 2022年02月22日 07:52/ 0 赞/ 286 阅读

相关重学前端-总结：08、JavaScript对象：你知道全部的对象分类吗？

文章目录重学前端-总结：08、JavaScript对象：你知道全部的对象分类吗？ JavaScript 中的对象分类宿主对象

左手的ㄟ右手/ 2021年09月28日 05:38/ 0 赞/ 269 阅读

相关重学前端-总结：06 、JavaScript对象：面向对象还是基于对象？

文章目录重学前端-总结：06 、JavaScript对象：面向对象还是基于对象？什么是面向对象？背景 JavaScri

深碍√TFBOYSˉ_/ 2021年09月28日 05:36/ 0 赞/ 301 阅读

相关 Javascript——面向对象

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

傷城~/ 2021年07月25日 12:58/ 0 赞/ 549 阅读