xinggevip

Es2015 clss类和继承
index.html<!DOCTYPE html> <html lang="en&qu...
扫描右侧二维码阅读全文
16
2019/06

Es2015 clss类和继承

index.html

<!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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>es6test</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but es6test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script type="module">
      let aaa = 'strive';
      class Person{
          constructor(name,age){
            this.name = name;
            this.age = age
          };
          showName(){
              return `他的名字叫${this.name}`
          };
          showAge(){
              return `他的年龄是${this.age}`
          };
          [aaa](){
              return '我是strive'
          }
      };
      let p1 = new Person('Tom',18);
      console.log(p1.showName());   // 他的名字叫Tom
      console.log(p1.showAge());    // 他的年龄是18
      // 动态更改类的方法名
      console.log(p1[aaa]());       // 我是strive 带引号的属性要用数组的方式引用
      console.log(p1.strive());     // 我是strive

      // Es6的class不存在变量提升,没有与解析的效果,只能先定义再使用
      // let newShang = new Shang();
      // console.log(newShang.name); // Cannot access 'Shang' before initialization

      class Shang{
        // 构造函数
        constructor(){
          this.name = "TTTTom";
        }
      };

      let newShang = new Shang();
      console.log(newShang.name);  // TTTTom
      
      
      // set get
      class Test01{
        constructor(){

        }
        get aaa(){
          return "你想要获取了aaa的值";
        }
        set aaa(val){
          console.log("你想要设置aaa的属性为" + val); 
        }
      };
      
      let newTest01 = new Test01();
      
      newTest01.aaa = "哈哈哈哈哈哈";  // 设置aaa的属性为哈哈哈哈哈哈
      console.log(newTest01.aaa);

      // 静态方法就是类的方法

      class Test02{
        constructor(){

        }
        showName(){
          return "Jack"
        }
        static showAge(){
          return 18;
        }
      };
      let newTest02 = new Test02();
      console.log(newTest02.showName()); // Jack
      console.log(Test02.showAge()); // 18 通过类直接调用方法 需要给方法加上static关键字

      // 继承 来一个父类 People 再来个子类Student

      class People{
        constructor(name){
          this.name = name;
        }
        showName(){
          console.log("父级的showName()");
          return "名字为" + this.name;
        }
      };
      class Student extends People{
        constructor(name,skill){
          super(name);
          this.skill = skill;
        }
        showName(){
          super.showName();  // 调用父类的showName
          console.log("子类的showName()");
        }
        showSkill(){
          return this.name + "的技能为" + this.skill;
        }
      };
      // let s1 = new Student("小明");
      // console.log(s1.showName());  // 名字为小明
      
      let s2 = new Student("小明","上网"); // 上网
      console.log(s2.skill);
      console.log(s2.showSkill()); // 小明的技能为上网
      s2.showName();  // 父级的showName()  子类的showName()


    </script>
    <!-- built files will be auto injected -->
  </body>
</html>
Last modification:June 17th, 2019 at 11:04 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment