2.JS学习篇-Class类

1. 基本概念

在JS中，class是一种用于创建对象和处理面向对象编程的语法结构：

Class Person {
    constructor (name, age) {
        this.name = name
        this.age = age
    }
    sayHello () {
        console.log(`Hello, my name is ${this.name} and I am ${this.age}`)
    }
}

constructor是类的构造函数，用于在创建对象时进行初始化操作，接收参数并将其赋值给对象的属性。

类中的方法（sayHello）可以直接访问对象的属性。

class还支持继承：

class Student extends Person {
    constructor (name, age, grade) {
        super(name, age)
        this.grade = grade
    }

    study () {
        console.log(`${this.name} is studing in grade ${this.grade}`)
    }
}
let student1 = new Student('pingbaobei', 18, 8)
student1.sayHello()
student1.study()

extends 关键字用于指定继承的父类。super关键字用于调用父类的构造函数。

在js中，Class类是一种用于定义对象模版和组织代码结构的编程概念。

Class类的基本概念包括：

1.属性：类中的成员变量，用于描述对象的状态。例在Person类中，name和age是属性

2.方法：类中的函数，用于定义对象的行为。如sayHello用于输出行为

3.构造函数（constructor）：这是一个特殊的方法，用于在创建类的实例时进行初始化的操作。在构造函数中，可以接收参数并为属性赋值。

4.实例：通过new关键字创建的类的具体对象。每个实例都有类中定义的属性和方法。

实际开发中，使用class可以使代码更具组织性和可维护性。

2. 使用场景

1.组件开发：创建自定义的UI组件，如按钮/表单组件等。每一个组件可以定义为一个类，具有自己的属性（状态）和方法（操作）

class Button {

    constructor (text, onClickHandler) {

        this.text = text

        this.onClickHandler = onClickHandler

    }

    render () {

    // 返回按钮的 HTML 结构

    }

}

2.模型对象：表示应用中的数据模型，如用户，订单，产品等

class User {

    constructor (name, email) {

        this.name = name

        this.email = email

    }

}

3.管理状态:结合状态管理库（如redux），创建类来封装状态和相关的操作方法。

4.表单验证:创建验证类来处理表单字段的逻辑验证。

5.数据结构:创建链表，树等数据结构的类。

6.服务类:用于封装和特定相关功能的逻辑，如与服务器的通信，数据存储等。

7.游戏开发:定义游戏中的角色，道具等对象。

3. 底层原理

class的底层原理实际是基于原型和原型链来实现的。当创建一个class时，以下是一些关键的底层机制在起作用：

1.构造函数（Constructor）

        1. 它类似于传统面向编程中的构造函数。在创建新的实例时候被调用，用于初始化对象的属性。

        2. 底层上，它有一个特殊的方法，用于设置实例的初始状态。

2.原型（Prototype）

        1. 每一个class都有一个与之关联的原型对象。方法通常被定义在原型上，而不是在每个实例上的重复定义，以节省内存。

        2. 当访问实例的方法时，如果实例本身设有该方法，JS引擎会沿着原型链在对象上查找。

3.原型链（__proto__）

        1. 实例通过__proto__指针链接到类的原型对象。当查找属性或方法时，如在实例上未找到，就会沿着原型链向上找，直到找到或到达原型链的顶端（Object.prototype）

Class Person {
    constructor (name) {
        this.name = name
    }

    sayHello () {
        console.log(`Hello, I am ${this.name}`)
    }
}

当创建 let person = new Person('wikiHong')时，底层发生的故事包括：

1. 创建一个新的空对象

2. 调用Person的构造函数，将新对象作为this并执行初始化操作，设置name属性

3. 将新对象__proto__指向Person.prototype,以便能够访问定义在原型上的sayHello方法。

这种基于原型的机制使得class在实现上具有高效的内存使用和灵活的属性查找。