• JavaScript 中类的使用(笔记)

    1. 类的基本定义

    class Person {
    // 构造函数
    constructor(name, age) {
        this.name = name;  // 成员变量
        this.age = age;
    }

    // 类方法
    printInformation(){
    	console.log(`name: ${this.name}; age: ${this.age}`);
    }
}

var person = new Person("Micheal", 18);
console.log(person.name, person.age);  // Micheal 18
person.printInformation();  // name: Micheal; age: 18

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    • 带默认参数的构造函数

      class Person {
    // 带默认参数的构造函数
    constructor(name, age=18) {
        this.name = name;  // 成员变量
        this.age = age;  // age 的默认值为18
    }
}

var person1 = new Person("Micheal");
console.log(person1.name, person1.age);  // Micheal 18

var person2 = new Person("Tom", 20);
console.log(person2.name, person2.age);  // Tom 20

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13

    2. 类的成员变量

    • 公有成员变量：

      class Person {
    // 带默认参数的构造函数
    constructor(name, age=18) {
        this.name = name;  // 默认为公有成员变量
        this.age = age
    }

    score = 80;  // 公有类成员变量，使用 this.score 方法调用

    // 类方法
    printInformation(){
    	console.log(`name: ${this.name}; age: ${this.age}; score: ${this.score}`);
    }
}

var person = new Person("Micheal");
console.log(person.name, person.age, person.score);  // Micheal 18 80
person.printInformation();  // name: Micheal; age: 18; score: 80

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18

    • 私有成员变量：

      class Person {
    // 带默认参数的构造函数
    constructor(name, age=18) {
        this.name = name;  // 默认为公有成员变量
        this.age = age
    }

    #score = 70; // 私有成员变量(使用#开头)，使用 this.#score 方法调用

    // 类方法
    printInformation(){
        console.log(`name: ${this.name}; age: ${this.age}; score: ${this.#score}`);
    }
}

var person = new Person("Micheal");
console.log(person.name, person.age);  // Micheal 18
// console.log(person.#score);  // error; 不可访问类内的私有变量
person.printInformation();  // name: Micheal; age: 18; score: 70

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19

    • 静态成员变量：

      class Person {
    // 带默认参数的构造函数
    constructor(name, age=18) {
        this.name = name;  // 默认为公有成员变量
        this.age = age
    }

    static score = 90; // 静态成员变量(使用static 开头)，使用 类名.变量名 调用

    // 类方法
    printInformation(){
        console.log(`name: ${this.name}; age: ${this.age}; score: ${Person.score}`);
    }
}

var person = new Person("Micheal");
console.log(person.name, person.age);  // Micheal 18
console.log(person.score, Person.score);  // undefined 90
person.printInformation();  // name: Micheal; age: 18; score: 70

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19

    3. 类的成员方法

    • get 和 set 方法

      class Person {
    // 带默认参数的构造函数
    constructor(name, age=18) {
        this.name = name;  // 默认为公有成员变量
        this.age = age
    }

    // get method
    get myage() {
        return this.age;
    }

    // set method
    set myage(age) {
        this.age = age;
    }

}

var person = new Person("Micheal");
console.log(person.name, person.age);  // Micheal 18

// 直接改变量
person.age = 20;
console.log(person.name, person.age);  // Micheal 20

// 使用 set 方法改变量
person.myage = 30;
person.myage(50);  // error； Uncaught TypeError: person.myage is not a function
console.log(person.name, person.age);  // Micheal 30

// 使用 get 方法获取变量
console.log(person.myage);  // 30
console.log(person.myage());  // error, Uncaught TypeError: person.myage is not a function

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34

    • 公有方法

      class Person {
    // 带默认参数的构造函数
    constructor(name, age=18) {
        this.name = name;  // 默认为公有成员变量
        this.age = age
    }

    method1(para1, para2, para3="default avlue"){
        console.log(para1, para2, para3);
    }

    method2 = function(para1, para2=0){
        console.log(para1, para2);
        return para1 + para2;
    }

}

var person = new Person("Micheal");

person.method1(1, 2); // 1 2 'default avlue'
person.method1(1, 2, 3); // 1 2 3

person.method2(1);  // 1 0
person.method2(1, 2); // 1 2

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25

    • 私有方法

      class Person {
    // 带默认参数的构造函数
    constructor(name, age=18) {
        this.name = name;  // 默认为公有成员变量
        this.age = age
    }

    // 私有方法， 以 # 开头
    #method1(para){
        console.log("调用了私有方法", para);
    }

    method2(){
        this.#method1("123");
    }
}

var person = new Person("Micheal");

// person.#method1(1); // error, Uncaught SyntaxError
person.method2();  // 调用了私有方法 123

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21

    • 静态方法: 静态方法调用直接在类上进行，不能在类的实例上调用。

      class Person {
    // 带默认参数的构造函数
    constructor(name, age=18) {
        this.name = name;  // 默认为公有成员变量
        this.age = age
    }

    // 公有方法
    method2(){
        console.log("公有方法");
    }

    // 静态方法, 采用 类名.方法名调用
    static method3(para){
        console.log("调用了静态方法", para);
    }
}

var person = new Person("Micheal");
person.method2();  // 调用了私有方法 123

// person.method3();  // error, Uncaught TypeError
Person.method3("123");  // 调用了静态方法 123

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23

    4. 类的静态区域

    class MyClass {
    static field1 = console.log("static field1");
    // 静态代码块
    static {
        console.log("static block1");
    };
    static field2 = console.log("static field2");
    static {
        console.log("static block2");
    };
}

// 执行顺序
// 'static field1'
// 'static block1'
// 'static field2'
// 'static block2'

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    5. 类的继承

    class Rect{
    constructor(width, height){
        this._width = width;
        this._height = height;
    }

    area(){
        return this._width * this._height;
    }

    discribe(){
        console.log(`宽：${this._width}; 高：${this._height}`);
    }

    rectMethod(){
        console.log("矩形类的特有方法");
    }
}

class Square extends Rect{
    constructor(length){
        super(length, length);
        this._length = length;
    }

    area(){
        return this._length * this._length;
    }

    discribe(){
        super.discribe();  // 调用父类方法
        console.log(`边长为: ${this._length};`);
    }

    squareMethod(){
        console.log("正方形类的特有方法");
    }
}

var r = new Rect(2, 3);
console.log(r.area()); // 6
r.discribe();  // 宽：2; 高：3

var s = new Square(5);
console.log(s.area());  // 25
s.discribe();  // 宽：5; 高：5  \n 边长为: 5; 边长为: 5;
s.rectMethod();  // 矩形类的特有方法
s.squareMethod();  // 正方形类的特有方法

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
  • 相关阅读:
    最小可用产品MVP，投石问路
    数据分析案例-基于多元线性回归算法预测学生期末成绩
    虚拟机CentOS 8 重启后不能上网
    mysql主从复制与读写分离
    浅谈——网络安全架构设计(三)
    创建对象在堆区如何分配内存
    C++匿名函数lambda详解
    实时数据监控，三防平板在工业领域的应用解析
    今年十个学软件测试九个在待业，看我如何破局成功且年薪50w，怎么才能做到？
    java毕业设计基于BS架构的视频监控系统的设计与实现mybatis+源码+调试部署+系统+数据库+lw
  • 原文地址：https://blog.csdn.net/qq_42887760/article/details/132639478