JS class 类

一、class 的属性及方法

1. constructor 构造函数
2. 普通函数
3. 静态方法

示例

<script>
    // 创建一个 class 类
    class Dog {
        // 构造函数，用于创建实例对象
        constructor(name) {
            this.name = name;
        }
        // 普通方法，所有实例对象皆可调用
        run() {
            console.log("会跑");
        }
        // 普通方法，所有实例对象皆可调用
        eat() {
            console.log("会吃");
        }
        // 静态方法,只有该class类本身及其子类可调用
        static fn() {
            console.log("这是类的静态方法");
        }
    }
    const dog = new Dog("小黑");
    console.log(dog); // {name: '小黑'}
    dog.run(); // 会跑
    dog.eat(); // 会吃
    Dog.fn(); // 这是类的静态方法
</script>

二、constructor 构造函数

1. 作用

   用于构造实例对象

2. constructor 的使用过程

   当使用 new 关键字生成实例对象时，class 中的 constructor 会被执行，之后返回一个实例对象
   如果未设置 construcotr 函数，class 自动返回一个空的实例对象
   使用 new 关键字生成实例对象时传入的参数，会传入 constructor 函数中。

3. 示例

<script>
    // class 中存在 constructor 函数，
    // 返回由构造函数创建的实例对象
    class Dog {
        constructor(name) {
            this.name = name;
        }
    }
    const d1 = new Dog("阿黄");
    console.log(d1); // {name: '阿黄'}

    // class 中没有 constructor 函数，
    // 返回一个空的实例对象
    class Apple {}
    const a1 = new Apple();
    console.log(a1); // {}
</script>

三、普通函数

1. 作用：

   将函数写入到构造函数的原型上，每个实例对象都可以调用这些普通函数

2. 示例

<script>
    class Dog1 {
        run() {
            console.log("我会跑");
        }
    }
    const d2 = new Dog1();
    const d3 = new Dog1();
    // 通过该 class 类创建的所有实例都可以使用 class 类中的普通函数
    d2.run();
    d3.run();

    // 往 class 中添加新的普通函数
    Dog1.prototype.eat = function eat() {
        console.log("会吃饭");
    };
    d2.eat();
</script>

四、静态方法

1. 特性：

   • class 类中的普通方法，都会被实例对象继承，所有实例对象都可以调用。
   • 如果 class 类中方法前，加上 static 关键字，则不会被实例对象继承,只能由该 class 类本身或其子类调用，
   • 实例对象无法调用被 static 关键字声明的方法
   • class 类本身无法调用普通方法
   • 父类的静态方法可以被子类继承

2. 使用方法

   1. 父类直接调用
   2. 子类继承父类的静态方法，由子类直接调用

3. 示例

<script>
    // 父类直接调用自身的静态方法
    class Dog2 {
        // 静态方法
        static fn() {
            console.log("父类的静态方法");
        }
    }
    Dog2.fn();

    // 子类继承父类的静态方法，由子类直接调用
    class Smalldog extends Dog2 {}
    Smalldog.fn();
</script>

五、new 关键字创建实例对象的过程

1. 作用：

   创建一个实例对象

2. 创建过程：

   (1) 第一步：在堆空间中创建一个空对象
   (2) 第二步：将该空对象的 __prototype__ 指向构造函数的 prototype
   (3) 第三步：将 constructor 构造函数中的 this 指向该空对象
   (4) 第四步：执行 constructor 构造函数，为该空对象添加属性
   (5) 第五步：如果 constructor 函数内部返回了一个对象，则实例对象为该对象；如果没有返回值，那实例对象则是刚才在堆空间中创建的对象

3. 示例：

<script>
    // 第五步示例代码
    class A {
        constructor(name) {
            this.name = name;
        }
    }
    class B {
        constructor(name) {
            this.name = name;
            return { age: "就不按套路来" };
        }
    }
    const a = new A("小A");
    const b = new B("小B");
    console.log(a); // {name: '小A'}
    console.log(b); // {age: '就不按套路来'}
</script>