【重学前端】003-JavaScript：正统的面向对象语言

落日映苍穹つ 2023-09-28 12:44 10阅读 0赞

# 【重学前端】003-JavaScript 对象：正统的面向对象语言 #

### 文章目录 ###

*  【重学前端】003-JavaScript 对象：正统的面向对象语言
 *  一、JavaScript 面向对象
 *   *  1、什么是面向对象
     *   *  思维导图
         *  概述
     *  2、JavaScript 的面向对象
     *   *  思维导图
         *  常见的”固有“观念：
         *  JavaScript 的特别之处：
         *  描述对象的方式
         *  JavaScript VS Java
         *  关键点
 *  二、JavaScript 属性
 *   *  1、概述
     *  2、两类属性
     *   *  数据属性的 4 个特征
         *  访问器属性的 4 个特征
     *  3、数据属性的其他三个值
     *   *  获取代码演示
         *  修改代码演示
     *  4、访问器属性
     *   *  对象定义时使用
         *  往定义好的对象里添加访问器属性
 *  三、总结

# 一、JavaScript 面向对象 #

## 1、什么是面向对象 ##

### 思维导图 ###

![b273a564d49447630ffdf94534fb035f.png][]

### 概述 ###

**对象：** 一切事物的总称。

**对象的三个特征：**

*  **唯一**标识性：对象是唯一的，即使看起来完全相同也不是同一个对象；
 *  对象有**状态**：同一对象可能处于**不同的状态**；
 *  对象有**行为**：对象的状态可能因为的行为而发生改变。

## 2、JavaScript 的面向对象 ##

### 思维导图 ###

![1884ada52b0a05e36bd7ba36ff8e2b2d.png][]

### 常见的”固有“观念： ###

面向对象要**有类**，有类的封装、继承、多态特性，类是静态的，**不可在运行时添加新属性**。

### JavaScript 的特别之处： ###

使用**原型**描述对象，JavaScript 对象**可以在运行时自由添加属性**。

**很多人认为：JavaScript 不是面向对象，而是基于对象。**

### 描述对象的方式 ###

通过”**类**“描述对象：最成功的流派，如 C++ ，Java等流行的编程语言；

通过”**原型**“描述对象：JavaScript；

### JavaScript VS Java ###

Java：类是静态的 + 一旦定义好，在**运行时无法改变 + 对象的**状态和行为**分别是对象**属性和函数\*\*。

JavaScript：可以在**运行时往里添加属性** \+ 对象的**状态和行为**都归结为**属性**。

### 关键点 ###

**任何语言运行时类的概念都是被弱化的！**

**JavaScript 提供了完整运行时的对象系统，它是正统的面向对象语言。**

# 二、JavaScript 属性 #

## 1、概述 ##

JavaScript 属性 = 状态 + 行为 = 属性 + 函数；

JavaScript 的两类属性 = 数据属性 + 访问器属性；

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

## 2、两类属性 ##

### 数据属性的 4 个特征 ###

> 大多数情况下，我们只关心属性的值就可以！

value：属性的值；
    writable：决定属性是否可以被赋值；
    enumerable：决定 for in 能否枚举该属性；
    configurable：决定该属性能否被删除或者改变特征值。

### 访问器属性的 4 个特征 ###

> 访问器属性使得属性在读和写时执行代码，它**允许使用者在读和写属性时，可以得到完全不同的值**。可以将其视为函数的语法糖。

getter：函数或 undefined，在取属性值时被调用；
    setter：函数或 undefined，在设置属性值时被调用；
    enumerable：决定 for in 能否枚举该属性；
    configurable：决定该属性能否被删除或者改变特征值。

## 3、数据属性的其他三个值 ##

### 获取代码演示 ###

// 定义一个对象 o
    const o = {
        
      a: 1,
    };
    
    // 获取对象 o 的属性 a 的 4 个特征和值
    const res = Object.getOwnPropertyDescriptor(o, "a");
    console.log(res); // { value: 1, writable: true, enumerable: true, configurable: true }

### 修改代码演示 ###

// 定义一个对象 o
    const o = {
        
      a: 1,
    };
    
    // 改变属性的特征的值
    Object.defineProperty(o, "b", {
        
      value: 2,
      writable: false,
      enumerable: false,
      configurable: false,
    });
    // 获取对象 o 的属性 b 的 4 个特征和值
    const res2 = Object.getOwnPropertyDescriptor(o, "b");
    console.log(res2);
    // { value: 2, writable: false, enumerable: false, configurable: false }

## 4、访问器属性 ##

### 对象定义时使用 ###

// 使用 get 和 set 创建访问器属性
    const obj = {
        
      get a() {
        
        console.log("get：访问器属性：每次都会执行代码！");
        return 100;
      },
    };
    console.log(obj.a);
    // get：访问器属性：每次都会执行代码！
    // 100

### 往定义好的对象里添加访问器属性 ###

// 使用 get 和 set 创建访问器属性
    const obj = {
        };
    // 创建一个访问器属性
    Object.defineProperty(obj, "b", {
        
      get() {
        
        console.log("get：访问器属性：每次都会执行代码！");
        // 获取的时候再 + "200"
        return this._b + "200";
      },
      set(value) {
        
        console.log("set：访问器属性：每次都会执行代码！");
        // 定义什么都 + "100"
        this._b = value + "100";
      },
    });
    // 设置 b 的值
    obj.b = "b";
    // 获取 b 的值
    console.log(obj.b);
    // set：访问器属性：每次都会执行代码！
    // get：访问器属性：每次都会执行代码！
    // b100200

# 三、总结 #

1、JavaScript 是正统的面向对象语言；

2、JavaScript 将对象的状态和行为统一归结为属性；

3、JavaScript 可在运行时动态添加属性，有数据属性和访问器属性之分。

[b273a564d49447630ffdf94534fb035f.png]: https://img-blog.csdnimg.cn/img_convert/b273a564d49447630ffdf94534fb035f.png
[1884ada52b0a05e36bd7ba36ff8e2b2d.png]: https://img-blog.csdnimg.cn/img_convert/1884ada52b0a05e36bd7ba36ff8e2b2d.png