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

一、JavaScript 面向对象

1、什么是面向对象

思维导图

概述

对象： 一切事物的总称。

对象的三个特征：

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

2、JavaScript 的面向对象

思维导图

常见的”固有“观念：

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

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：决定该属性能否被删除或者改变特征值。
1
2
3
4

访问器属性的 4 个特征

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

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

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 }
1
2
3
4
5
6
7
8

修改代码演示

// 定义一个对象 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 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4、访问器属性

对象定义时使用

// 使用 get 和 set 创建访问器属性
const obj = {
  get a() {
    console.log("get：访问器属性：每次都会执行代码！");
    return 100;
  },
};
console.log(obj.a);
// get：访问器属性：每次都会执行代码！
// 100
1
2
3
4
5
6
7
8
9
10

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

// 使用 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

三、总结

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

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

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