用class创建一个类, 并实现自有,共享,静态成员的声明与输出

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用class创建一个类, 并实现自有,共享,静态成员的声明与输出</title>
  </head>
  <body>
    <script>
      class Class1 {
        // 公共成员
        sex = "男";
        constructor(male, fmale) {
          //自有成员
          this.male = male;
          this.fmale = fmale;
        }
        //共享成员
        getInfo() {
          return `${this.male} : ( ${this.fmale} )`;
        }
        // 静态成员
        static status = "enabled";
      }
      const obj1 = new Class1("男", "女");
      console.log(obj1.getInfo());
      console.log(obj1.getInfo());
      console.log(Class1.status);
      //   继承：extends
      class Class2 extends Class1 {
        constructor(male, fmale, sex) {
          super(male, fmale);
          this.sex = sex;
        }
        // 子类中对父类的方法进行扩展
        getInfo() {
          return `${super.getInfo()} , ${this.sex}`;
        }
      }
      const obj2 = new Class2("中国", "男", "女");
      console.log(obj2.getInfo());
      //   -------------------------------
      // 数组与对象解构方法
      //   声明
      let [name, age] = ["陈老师", "30"];
      console.log(name, age);
      //更新
      [name, age] = ["邱老师", "22"];
      console.log(name, age);
      // 参数不足给一个默认值
      [name, age, sex = "女"] = ["邱老师", "22"];
      console.log(name, age, sex);
      // 参数过多使用 ....rest
      [name, ...rest] = ["严老师", "李老师", "王老师"];
      console.log(name);
      console.log(rest);
      // 使用二数交换
      let x = 1;
      let y = 2;
      [y, x] = [x, y];
      console.log([x, y]);
      //   对象解构
      // 目标是把对象中的属性值保存到对应的，与属性同名的变量中
      let { mingzi, nianling, guoji } = {
        mingzi: "陈老师",
        nianling: 18,
        guoji: "中国",
      };
      console.log(mingzi, nianling, guoji);
      // 更新, 用一对大括号,把整个表达式封装起来
      ({ mingzi, nianling, guoji } = {
        mingzi: "严老师",
        nianling: 19,
        guoji: "中国人民",
      });
      console.log(mingzi, nianling, guoji);
      // 如果左边模板中的变量存在命名冲突怎么办? 起一个别名id: itemId
      let { id: itemId, num, price } = { id: 123, num: 10, price: 1234 };
      console.log(itemId, num, price);
    </script>
  </body>
</html>
相关文章
