JavaScript 类与继承

一. JavaScript 中类的写法

1.如何写一个类

class User {
  // 声明公有一个属性
  name = "RQ桑";
  // 声明一个私有属性
  #gender = "男";
}

2.直接调用，这种情况不能调用类

console.log(User); //浏览器将他解释为函数，直接输出函数的内容
console.log(typeof User); //打印  function

3.实例化一个类，传入的参数是构造器里的参数

// 用 new 语法 实例化一个类
const user = new User();
console.log(typeof user); //object
console.log(user.name); //打印公共属性：RQ桑
console.log(user.gender); // 不能找到私有属性 undefined

二、类的语法详解

1. 构造方法：初始化对象

class User1 {
  // 构造方法其实就是类可以传入的参数
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
}

// 实例化一个类，传入的参数是构造器里的参数
const user1 = new User1("RQ桑", "qq@163.com");
console.table(user1);
// 输出值如下图片

2. 公共方法放在构造函数的原型上：原型方法（共享方法）

class User2 {
  // 构造方法其实就是类可以传入的参数
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  // 非静态属性
  // this.gender = '男'; //错误写法
  gender = "男";

  //非静态方法
  show() {
    // return { name: this.name, email: this.email };
    // 非静态成员中的this表示就是当前属性值
    return this;
  }
}
// 实例化 User2 类
const user2 = new User2("RQ桑", "qq@163.com");
console.log(user2.gender); // 打印：男

console.table(user2.show());  //类的 this 指针指向为新创建（new出来）的属性值
// 输出值如下图片

3. 静态属性：可以看做是变量-/-静态方法：可以看做是一个函数，这时 this 指针的方向就和

class User3 {
  // 构造方法其实就是类可以传入的参数
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  // 静态属性
  static userName = "RQ桑";

  // 静态方法
  static fetch() {
    // 静态成员中的this表示的就是当前的类
    return this;
  }
}
// 访问静态属性，无需实例化，直接用 ‘.’  +  ‘方法名’
console.log(User3.userName); //打印：RQ桑

// 访问静态方法，无需实例化，直接用 ‘.’  +  ‘方法名’
console.log(User3.fetch()); // this指向当前的类、输出值如下图片

4. 私有成员声明

// 仅限本类访问，可以通过方法修饰后发出。所以不能直接访问
class User4 {
  // 构造方法其实就是类可以传入的参数
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  // 声明一个私有成员，外部无法访问
  #age = 50;
}

const user4 = new User4("RQ桑", "qq@163.com");
// 外部无法访问
console.log(user4.age); //打印 ：undefined

5. 使用访问器属性 get、set 访问私有成员

class User5 {
  // 构造方法其实就是类可以传入的参数
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  // 声明一个私有成员，外部无法访问
  #age = 50;

  // get访问器，获取私有成员，不允许写操作
  get age() {
    return `你的年龄是 ${this.#age}岁`;
  }

  // set访问器，写入 成员 的值，不允许读操作，即不能return
  set age(v) {
    //   过滤写入的非法年龄
    if (v >= 18 && v < 60) {
      // 内部访问私有成员，要带#标识符
      this.#age = v;
    } else {
      console.log("你的年龄不符合要求！");
    }
  }
}

// 除了静态方法外，其他的类的访问都要实例化
const user5 = new User5("RQ桑", "qq@163.com");

// get方法读取私有成员
console.log(user5.age); //打印：你的年龄是 50 岁

// set方法
user5.age = 32;
console.log(user5.age); //打印：你的年龄是 32 岁

三. 类的继承

class User6 {
  // 构造方法其实就是类可以传入的参数
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }


  //非静态方法
  show() {
    // return { name: this.name, email: this.email };
    // 非静态成员中的this表示就是当前属性值
    return this;
  }
}

// 继承：扩展父类
class Child extends User6 {
  constructor(name, email, gender) {
    // 第一步必须将父类的构造方法来执行，否则this用不了
    super(name, email);
    // 第二步：给子类的新成员去初始化
    this.gender = gender;
  }

  // 重写 show() 方法
  show() {
    return { name: this.name, email: this.email, gender: this.gender };
  }
}

// 实例化一个类，构造器有多少参数，实际就要传入多少参数。
const child = new Child("RQ桑", "QQ@QQ.com", "男");
console.log(child.show());
//打印： {name: 'RQ桑', email: 'QQ@QQ.com', gender: '男'}