- 【重学前端】003-JavaScript 对象：正统的面向对象语言
- 一、JavaScript 面向对象
- 1、什么是面向对象
- 思维导图
- 概述
- 2、JavaScript 的面向对象
- 思维导图
- 常见的”固有“观念：
- JavaScript 的特别之处：
- 描述对象的方式
- JavaScript VS Java
- 关键点
- 二、JavaScript 属性
- 1、概述
- 2、两类属性
- 数据属性的 4 个特征
- 访问器属性的 4 个特征
- 3、数据属性的其他三个值
- 获取代码演示
- 修改代码演示
- 4、访问器属性
- 对象定义时使用
- 往定义好的对象里添加访问器属性
- 三、总结
对象： 一切事物的总称。
对象的三个特征：
- 唯一标识性：对象是唯一的，即使看起来完全相同也不是同一个对象；
- 对象有状态：同一对象可能处于不同的状态；
- 对象有行为：对象的状态可能因为的行为而发生改变。
面向对象要有类，有类的封装、继承、多态特性，类是静态的，不可在运行时添加新属性。
JavaScript 的特别之处：使用原型描述对象，JavaScript 对象可以在运行时自由添加属性。
很多人认为：JavaScript 不是面向对象，而是基于对象。
描述对象的方式通过”类“描述对象：最成功的流派，如 C++ ，Java等流行的编程语言；
通过”原型“描述对象：JavaScript；
JavaScript VS JavaJava：类是静态的 + 一旦定义好，在运行时无法改变 + 对象的状态和行为分别是对象属性和函数**。
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 可在运行时动态添加属性，有数据属性和访问器属性之分。
